JSFiddle - React, Tailwind, and code Playground

by DonTomato

HTML

<div class="my-grid">
  <div class="flex-container">
    <input type="text">
  </div>

  <div class="flex-container">
    <input type="text">
  </div>
</div>

SCSS

.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;

  border: 1px solid #cc0384;
  border-radius: 5px;
  padding: 5px;
  
  > input {
    flex-grow: 1;
    border: none;
    outline: none;
  }
}