JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<h1>Right side sticky bottom.</h1>
<section>
  <div class="panel">
    <div class="grow">
      <div class="block">One.</div>
      <div class="block">Two.</div>
      <div class="block">Three.</div>
      <div class="block">Four.</div>
      <div class="block">Five.</div>
      <div class="block">Six.</div>
    </div>
    <div class="shrink">
      <div class="block">Seven.</div>
    </div>
  </div>
  <div class="panel">
    <div class="grow">
      <div class="block">One.</div>
      <div class="block">Two.</div>
    </div>
    <div class="shrink">
      <div class="block">Three.</div>
    </div>
  </div>
</section>

<hr />

<h1>Left side sticky bottom.</h1>
<section>
  <div class="panel">
    <div class="grow">
      <div class="block">One.</div>
      <div class="block">Two.</div>
    </div>
    <div class="shrink">
      <div class="block">Three.</div>
    </div>
  </div>
  <div class="panel">
    <div class="grow">
      <div class="block">One.</div>
      <div class="block">Two.</div>
      <div class="block">Three.</div>
      <div class="block">Four.</div>
      <div class="block">Five.</div>
      <div class="block">Six.</div>
    </div>
    <div class="shrink">
      <div class="block">Seven.</div>
    </div>
  </div>
</section>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
  font-size: 1.6em;
}

hr { margin: 2em 0; }

section {
  box-shadow: 0 0 0 1px red;
  display: inline-flex;
  padding: 6px;
  width: 500px;
}

.panel {
  box-shadow: 0 0 0 1px green;
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.grow {
  box-shadow: 0 0 0 1px magenta;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  padding: 6px;
}

.block { background-color: rgba(0, 0, 0, 0.1); }