I'm facing css issue where with default font size radio button is perfectly aligned to the label text, but as soon as I zoom in or increase the font size, radio button is no longer aligned with text. I would like to style it so radio button is always aligned with text regardless of font size. What adjustment do I need to make on my css to make this happen? https://codepen.io/Judoboy/pen/OJQqPEW?editors=1100
.label-container {
display: inline-flex;
justify-content: flex-start;
align-items: start;
}
.label-text {
display: flex;
justify-items: center;
align-items: center;
height: 100%;
}
.prefix {
font-weight: bold;
font-size: 30px;
}
.text-spacing {
padding-inline-start: 8px;
padding-inline-end: 4px;
}<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</div>
</div>
</label>Try the Grid solution, we make a 2 x 2 grid, the first column for the radio button and empty cell, second for the labels.
.label-container {
display: inline-grid;
grid-template-columns: auto 1fr;
grid-auto-rows: auto;
grid-template-areas:
'input prefix-text'
'empty label-text';
}
input {
grid-area: input;
align-self: center;
margin: 0;
}
.label-text:first-of-type {
grid-area: prefix-text;
align-self: center;
}
.label-text:last-of-type {
grid-area: label-text;
}
.prefix {
font-weight: bold;
font-size: 30px;
}
.text-spacing {
padding-inline-start: 8px;
padding-inline-end: 4px;
}<label class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label</div>
</label>.label-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
input {
margin: 0;
position: relative;
top: -8px;
}
.label-text {
box-sizing: border-box;
white-space: nowrap;
line-height: 1;
}
.prefix {
font-weight: bold;
font-size: 30px;
}
.text-spacing {
padding-inline-start: 8px;
padding-inline-end: 4px;
}<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</div>
</div>
</label>