проблема с выравниванием переключателей таблицы

Question

я хочу, чтобы содержимое таблицы выглядело так, как показано в pi c: -

<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
   <div>
      <div class="wrapper-class">
         <span>
         <input type="radio" value="true" name="abc[status]" id="abc_status_true">
         <label for="abc_approve">Approve</label>
         </span>
         <span>
         <input type="radio" value="false" name="abc[status]" id="abc_status_false">
         <label for="abc_reject">Reject</label>
         </span>
      </div>
   </div>
   <div>
      <input type="submit">
   </div>
</form>

Answer 1

Вы можете изменить тег span на тег div и отобразить кнопку «Отправить» справа на display flex как

.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}

/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}

<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
   <div class="form">
      <div class="wrapper-class">
         <div>
         <input type="radio" value="true" name="abc[status]" id="abc_status_true">
         <label for="abc_approve">Approve</label>
         </div>
         <div>
         <input type="radio" value="false" name="abc[status]" id="abc_status_false">
         <label for="abc_reject">Reject</label>
         </div>
      </div>
   
   <div>
      <input type="submit">
   </div>
   </div>
</form>