JSFiddle - React, Tailwind, and code Playground

by Susan

HTML

<div class="flex">
  <div id="map">map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map </div>
  <div id="daterange">daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange </div>
  <div id="zip">zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip </div>
  <div id="keywords">keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords </div>
  <div id="operations">operations operations operations operations operations operations operations operations operations operations operations operations</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>#daterange {
  background-color: yellow;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#zip {
  background-color: lightgreen;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#keywords {
  background-color: lightblue;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
  flex-grow:1;
}

.flex>#operations {
  background-color: red;
  flex: 0 1 75%;
  text-align: center;
  padding: 10px;
}

.flex>#map {
  flex: 1 0 25%;
  background-color: pink;
  text-align: center;
  padding: 10px;
}