JSFiddle - React, Tailwind, and code Playground

by Victor Alekseev

HTML

<table id="checkbox">
<tr>
  <td>Пицца</td>
  <td><input type="checkbox"></td>
</tr>
<tr>
  <td>Хот-дог</td>
  <td><input type="checkbox"></td>
</tr>
<tr>
  <td>Гамбургер</td>
  <td><input type="checkbox"></td>
</tr>
<tr>
  <td>Попкорн</td>
  <td><input type="checkbox"></td>
</tr>
<tr>
  <td>Чупа-чупс</td>
  <td><input type="checkbox"></td>
</tr>
<tr>
<td>
  <input type="button" value="Отправить">
  <input type="button" value="Сбросить">
</td>
</tr>
</table>

<div id="radio">
<p>Как будете расплачиваться?</p>
<div class="row"><input type="radio">Наличными</div>
<div class="row"><input type="radio">Чеком</div>
<div class="row"><input type="radio">Дебитной картой</div>
<div class="row">
<p>Кредитной картой</p>
<input type="radio" class="card">MasterCard<br>
<input type="radio" class="card">Visa<br>
<input type="radio" class="card">Discovery<br>
<input type="radio" class="card">American Express
</div>
<input type="button" value="Отправить">
<input type="button" value="Сбросить">
</div>

CSS

#checkbox {
  width:200px;
  border-spacing:0;
  
  /*расположение рядом*/
  vertical-align:top;
  display:inline-block;
  margin-right:25px;
}
#checkbox tr:nth-child(2n-1) {
  background:#ccc;
}
#checkbox td {
  padding:3px 5px;
}
#checkbox td:first-child {
  width:180px;
}


#radio {
  /*расположение рядом*/
  vertical-align:top;
  display:inline-block;
}
.row:nth-child(2) {
  border-top:solid 1px #ccc;
}
.row {
  border:solid 1px #ccc;
  border-top:none;
  padding:3px 5px;
}
.card {
  margin-left:50px;
}