JSFiddle - React, Tailwind, and code Playground

by Chamster

HTML

<div class="outer">
  <div class="first inner">I'm the first</div>
  <div class="rest inner">we're</div>
  <div class="rest inner">the</div>
  <div class="rest inner">rest</div>
</div>

CSS

div.outer {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: flex;
  width: 100%;
  height: 101px;
  border: 3px solid pink;
  align-items: stretch;
}

div.inner {
  padding: 10px;
  background: lightgray;
  border: 1px solid darkgray;
  display: flex;
}

div.first {
  flex: 3;
  vertical-align: middle;
  align-items: stretch;
  align-content: stretch;
  align-self: stretch;
}

div.rest {
  flex: 1;
  justify-content: flex-end;
  align-self: center;
}