如何将标签文本分别与div分开？

Question

我定义了一个标签，其中一半需要在左侧，另一半需要在右侧。我该如何解决，以便将另一半拉到正确的位置？

我添加了margin-right来使文本向右拉，但其他div不一致。

<div class="radio">
  <input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
  <label class="radio-label" for="test_id_1">
    Test of $12.0
    <span class="test-cost">Free</span>
  </label>
  <hr class="test-hr">
  <p class="test-message"></p><p>- First test message</p><p></p>
</div>

预期结果：

当前结果：

如何使上方图片中的文字（如“免费”）显示在最右侧，如预期结果所示？还应使其在其他div上始终保持一致，以使div中的空格相同。

Answer 1

以下是 JsBin 的完整示例：https://jsbin.com/yafesuyola/1/edit?html,css,output

它将 flexbox 与justify-content: space-between一起使用。我还在标签和输入周围添加了div，以使它们以100％的宽度保持在同一行。

<div class="radio">
  <div class="radio-and-label">
    <input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
    <label class="radio-label" for="test_id_1">
      Test of $12.0
      <span class="test-cost">Free</span>
    </label>
  </div>
  <hr class="test-hr">
  <p class="test-message"></p><p>- First test message</p><p></p>
</div>

.radio {
  border: 2px solid #33c;
  border-radius: 5px;
  padding: 10px;
  background: #e0eeff;
  color: #33c;
  font-weight: bold;
}

.radio-and-label {
  display: flex;
}

.radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.test-cost {
  text-align: right;
}

.test-hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

希望有帮助！

Answer 2

将元素始终固定在元素的右上方？

.radio {
  position: relative;
}

.test-cost {
  position: absolute;
  top: 2px;
  right: 2px; // or whatever px/rem/etc value that fits your need
}