JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<div class="container">
<div class="holder">
  <label for="city">City</label>
  <input class='test' type="text" name='city'>
</div>
<div class="holder">
  <label for="city">City</label>
  <input class='test' type="text" name='city'>
</div><div class="holder">
  <label for="city">City</label>
  <input class='test' type="text" name='city'>
</div>
</div>

CSS

body {
  background: pink;
}
.container {
  display: flex;
  width: 80%;
  margin: auto;
  justify-content: center;
  background: #f4f4f4;
}
input {
  margin-right: 8px;
  width: 20%;
  border: none;
  /* margin: 8px 8px 16px 24px; */
}
.test {
  width: 100%;
}
.holder {
  margin-right: 8px;
  box-sizing: border-box;
}

.holder:last-child {
  margin-right: 0;
  /* flex-grow: 1; */
}
label {
  display: block;
  margin-bottom: 8px;
}