JSFiddle - React, Tailwind, and code Playground

by Eugeny Venegrad

HTML

<div>
  <input type="text" cell="2">
  <input type="text" cell="2">
  <input type="text" cell="3">
  <input type="text" cell="3">
  <input type="text" cell="3">
  <input type="text" cell="inline">
  <input type="text" cell="inline">
  <input type="text" cell="inline">
  <input type="text" cell="inline">
  <input type="text" cell="inline">  <input type="text" cell="inline">  <input type="text" cell="inline">  <input type="text" cell="inline">  <input type="text" cell="inline">  <input type="text" cell="inline">  <input type="text" cell="inline">  



</div>

CSS

* {
  box-sizing: border-box;
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -5px;
}

input {
  width: 100%;
  margin-bottom: 10px;
  padding-right: 5px;
}

input[cell="2"] {
    width: calc(50% - 5px);
}

input[cell="3"] {
    width: calc(33.333% - 5px);
}

input[cell="inline"] {
  width: auto;
  flex: 1;
}