JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<section>
  <div id="icons">😊</div>
  <div id="vbox">
    <p id="updateDeck">
    Top line of the <br>right column
    </p>
    <button id="right-remainder">
    Other stuff
    </button>
    <p>
    And more stuff in this column.
    </p>
  </div>
</section>

CSS

section {
  display: grid;
   grid-template-columns: min-content 1fr;
   grid-template-rows: min-content 1fr;
   column-gap: 5px;
}

#icons {
  grid-row-start: 1;
  grid-row-end: 2;
  align-self: center;
}

#vbox {
  display: contents;
}

#vbox > #updateDeck {
   background-color: green;
   grid-row-start: 1;
   grid-row-end: 2;
   grid-column-start: 2;
   grid-column-end: 3;
   align-self: center;
}

#vbox > :not(#updateDeck) {
   background-color: cyan;
   grid-row-start: 2;
   grid-row-end: 3;
   grid-column-start: 2;
   grid-column-end: 3;
}