тип входа радио вертикальное выравнивание

Question

как выровнять по вертикали эти две радиокнопки
они должны быть выровнены по x осям

.wrap{
display:grid;
grid-template-columns:auto auto;
background:orange;
}

input[type='radio']{
	display:inline-block;
	margin:0 9px;
	line-height:25px;
	vertical-align:middle;
}

.bbtn{
	display:inline-block;
	line-height:25px;
}

<div class='wrap'>
<div>
<input type='radio' name='aradio' value='a' checked>
</div>
<div>
<input type='radio' name='aradio' value='b'>
<div class='bbtn'>LOREM</div>
</div>
</div>

Answer 1

Поскольку текст играет роль в определении выравнивания, убедитесь, что у вас всегда будет хотя бы похожая вещь, например пустой псевдоэлемент с такими же свойствами:

.wrap {
  display: grid;
  grid-template-columns: auto auto;
  background: orange;
}

input[type='radio'] {
  margin: 0 9px;
  /*vertical-align: middle; change this to what you want to control the alignment */
}

.bbtn {
  display: inline-block;
  line-height: 25px;
}

.wrap> div::after{
  content:"";
  line-height:25px; /* the same as the one used with bbtn */
}

<div class='wrap'>
  <div>
    <input type='radio' name='aradio' value='a' checked>
  </div>
  <div>
    <input type='radio' name='aradio' value='b'>
    <div class='bbtn'>LOREM</div>
  </div>
</div>

Answer 2

Этот CodePen показывает их выравнивание по вертикали с левой стороны. Это то, что вы после? Я изменил grid-template-columns: auto auto; на grid-template-columns: 1fr;

https://codepen.io/gunderodd/pen/abOGzpO