How to get radio button to stay aligned when label text wraps to next line?-CodePudding

Right now I have radio button aligned at the prefix text, but when label text becomes long and wrap to next line, for some reason the radio button to move downward and no longer aligned to prefix text. But I would like radio button to stay still whether label gets wrapped or not. What changes do I need to make in css? https://codepen.io/Judoboy/pen/dydLPJE

.label-container {
  display: inline-flex;
  align-items: center;
}

.label-wrapper {
  width: 200px;
}

input {
  margin: 0;
  position: relative;
  top: -8px;
}

.label-text {
  box-sizing: border-box;
  line-height: 1;
}

.prefix {
  font-weight: bold;
  font-size: 14px;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

<div class='label-wrapper'>
  <label >
    <input type="radio" />
    <div>
      <div >Prefix Text</div>
      <div >This is label. This is label. This is label. This is label.</div>
    </div>
  </label>
</div>

CodePudding user response：

You can simplify your CSS, remove the position:relative; top: -8px, change align-items to flex-start

.label-wrapper {
  width: 200px
}

.label-container {
  display: flex;
  align-items: flex-start;
}

.prefix {
  font-weight: bold;
  font-size: 14px;
}

.text-spacing {
  padding-inline: 8px 4px;
}

<div class='label-wrapper'>
  <label >
    <input type="radio" />
    <div>
      <div >Prefix Text</div>
      <div >This is label. This is label. This is label. This is label.</div>
    </div>
  </label>
</div>

if what you really want is having the input to be centered to prefix text despite the font-size, then you can do this:

.label-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.label-container {
  display: flex;
  align-items: center
}

.prefix {
  font-weight: bold;
  font-size: 14px;
}

.large {
  font-size: 20px
}

.text-spacing {
  padding-inline: 8px 4px;
}

.label-text:not(.prefix) {
  padding-left: 30px
}

<div class='label-wrapper'>
  <label >
      <input type="radio" />
      <div >Prefix Text</div>
  </label>
  <div >This is label. This is label. This is label. This is label.</div>
</div>


<hr />

<div class='label-wrapper'>
  <label >
      <input type="radio" />
      <div >Prefix Text</div>
  </label>
  <div >This is label. This is label. This is label. This is label.</div>
</div>

CodePudding user response：

Try this

.label-container {
  display: inline-flex;
  align-items: flex-start;
}

.label-wrapper {
  width: 200px;
}

input {
  margin: 0;
}

.label-text {
  box-sizing: border-box;
  line-height: 1;
}

.prefix {
  font-weight: bold;
  font-size: 14px;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

<div class='label-wrapper'>
  <label >
    <input type="radio" />
    <div>
      <div >Prefix Text</div>
      <div >This is label. This is label. This is label. This is label.</div>
    </div>
  </label>
</div>