JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div>
  <label class='column'>x</label>
  <label class='column'>y</label>
  <label class='column'>z</label>
</div>
<div>
  <div class='column'>
    <input type='radio' name='one'/>
  </div>
  <div class='column'>
    <input type='radio' name='one'/>
  </div>
  <div class='column'>
    <input type='radio' name='one'/>
  </div>
</div>
<div>
  <div class='column'>
    <input type='radio' name='two'/>
  </div>
  <div class='column'>
    <input type='radio' name='two'/>
  </div>
  <div class='column'>
    <input type='radio' name='two'/>
  </div>
</div>
<div>
  <div class='column'>
    <input type='radio' name='three'/>
  </div>
  <div class='column'>
    <input type='radio' name='three'/>
  </div>
  <div class='column'>
    <input type='radio' name='three'/>
  </div>
</div>
<div class='es'>

</div>
<div>
  <div>
    
  </div>
  <div>
    <input type='checkbox'/>
  </div>
</div>

CSS

.column {
  display: inline-block;
  width: 30px;
  text-align: center;
  vertical-align: top;
  margin: 0;
}
.es {
  height: 1px;
  margin: 20px 0;
  background-color: gray;
}