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 class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
</label>
</div>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 class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">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 class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix">Prefix Text</div>
</label>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
<hr />
<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix large">Prefix Text</div>
</label>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>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 class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
</label>
</div>