JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="location">
  <div class="back">
    <input type="radio" name="location">
    <input type="radio" name="location">
    <input type="radio" name="location">
  </div>
  <div class="middle">
    <div class="left">
      <input type="radio" name="location">
      <input type="radio" name="location">
      <input type="radio" name="location">
    </div>
    <div class="house">HOUSE</div>
    <div class="right">
      <input type="radio" name="location">
      <input type="radio" name="location">
      <input type="radio" name="location">
    </div>
  </div>
  <div class="front">
    <input type="radio" name="location">
    <input type="radio" name="location">
    <input type="radio" name="location">
  </div>
</div>

SCSS

.location {
  width: 150px;
  
  div {
    width: 100%;
  }

  .middle {
    display: flex;
    flex-flow: row nowrap;
  }

  .back, .left, .right, .front {
    display: flex;
    justify-content: center;
  }

  .left, .right {
    flex-flow: column nowrap;
  }
  
  .left {
    align-items: flex-end;
  }
}