JSFiddle - React, Tailwind, and code Playground

by thepio

HTML

<div class="container">
  <div class="column left">
    Fixed 90px
  </div>
  <div class="column">
    Column
  </div>
  <div class="column">
    This is the longest column
  </div>
  <div class="column">
    Longer Column
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding:0;
}

.container {
  width: 100%;
  display: flex;
}

.column {
  background-color: #f9f9f9;
  padding: 10px 15px;
  border: 1px solid grey;
  flex: 1;
}

.column.left {
  background-color: grey;
  color: white;
  width: 90px;
  max-width: 90px;
  flex: 0 0 90px;
}