JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<header>
<h1><span>Here's</span> <span>lots</span> <span>of</span> <span>text</span> <span>as</span> <span>a</span> <span>header</span> <span>which</span> <span>cannot</span> <span>easily</span> <span>fit</span> <span>on</span> <span>one</span> <span>line</span> <span>on</span> <span>most</span> <span>displays</span></h1>
<div class="buttons">
<a>1</a>
<a>2</a>
<a>3</a>
<span class="fill"></span>
<a>4 with long label</a>
<a>5</a>
</div>
</header>

CSS

header
{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

header > h1
{
  display: contents;
}

header > span
{
  font-size: 2rem;
  outline: dotted 1px #ddd;
}

.buttons
{
  display: flex;
  flex: 1 0 auto;
  flex-wrap: nowrap;
}

.buttons a
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0.5rem;
  box-sizing: border-box;
  border: solid red 1px;
  cursor: pointer;
}

.buttons .fill
{
  flex: 1 0 auto;
  background: yellow;
}