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

我定义了一个标签，其中一半需要在左侧，另一半文本需要在右侧。我怎样才能解决这个问题，使另一半得到正确的解决

我添加了右边距，让文本向右拉，但其他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>

测试$12.0
自由的

-第一条测试消息

预期结果：

当前结果：

---

如何使上图中的文本，即“自由”显示在最右侧，如预期结果所示？也要使它在其他div上始终保持一致，以便div之间的空间是相同的。

剪辑元素，使其始终固定在元素的右上角

.radio {
  position: relative;
}

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

---

下面是一个使用JsBin的完整工作示例：

它将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>

---

希望有帮助

您是否尝试为类

测试成本设置规则
float:right

或类似的东西，然后

float:right

ur span inside您的CSS当前是什么样子的？请添加您的CSS。我同意@MikeDiglio的观点，如果有CSS，或者更好的是，有一个JSFIDLE或工作代码段，那就太好了。

.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; 
}