JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo">
  <div class="bar">a</div>
  <div class="baz">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Duo Reges: constructio interrete. Quod quidem nobis non saepe contingit. Invidiosum nomen est, infame, suspectum. Invidiosum nomen est, infame, suspectum. </p>

<p>Sed fac ista esse non inportuna; Tamen a proposito, inquam, aberramus. Tamen a proposito, inquam, aberramus. Laboro autem non sine causa; Hoc enim constituto in philosophia constituta sunt omnia. Sed ille, ut dixi, vitiose. Quis istud possit, inquit, negare? </p>
  </div>
</div>

<div class="foobar">
  <div class="bar">a</div>
  <div class="baz">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Duo Reges: constructio interrete. Quod quidem nobis non saepe contingit. Invidiosum nomen est, infame, suspectum. Invidiosum nomen est, infame, suspectum. </p>

<p>Sed fac ista esse non inportuna; Tamen a proposito, inquam, aberramus. Tamen a proposito, inquam, aberramus. Laboro autem non sine causa; Hoc enim constituto in philosophia constituta sunt omnia. Sed ille, ut dixi, vitiose. Quis istud possit, inquit, negare? </p>
  </div>
</div>

SCSS

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.foo {
  display: grid;
  grid-column-gap: 2.25rem;
  grid-template-columns: minmax(auto, 10rem) auto;
}

.bar {
  background-color: tomato;
}

.baz {
  background-color: lime;
}

.foobar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  .bar {
    flex: 0 1 10rem;
    min-width: 0%;
  }
  
  .baz {
    flex: 0 1 calc(100% - 196px);
    min-width: 0%;
  }
}