JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<input type="text" />
<div class="container">
  <div class="container__row">
    <div class="container__cell">
      1 1 1 1 1 1 1 1 1 1
    </div>
  </div>
  <div class="container__row">
    <div class="container__cell" tabindex="0">
      1 1 1 1 1 1 1 1 1 1
    </div>
  </div>
  <div class="container__row">
    <div class="container__cell">
      1 1 1 1 1 1 1 1 1 1
    </div>
  </div>
</div>

SCSS

.container {
  display: table;
  border-collapse: collapse;
  border: 1px solid red;
  
  width: 400px;
}

.container__row {
  display: table-row;
  border: 1px solid red;
}

.container__cell {
  display: table-cell;
  border: 1px solid blue;
  
  &:focus {
    border: 1px solid red;
    outline: none;
    z-index: 1;
    position: relative;
  }
}