JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <aside>aside</aside>
  <section>
    <div id="map">map</div>
  </section>
</main>

CSS

main {  display: flex;  flex-flow: row nowrap; }

main aside { flex: 1 1 30%; background:red; }

main section { flex: 1 1 70%; display: flex; background:blue; }

#map { flex: 1; }

/* Responsive */

@media all and (max-width: 640px) {
  main { flex-flow: column nowrap; }
  main section { min-height: 400px; }
}