JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="card">
  <h2><span>Birgitte blev ikke scannet for osteoporose efter en brækket ryg. Da hun gjorde, viste det sig, at hun havde knogler som en 90-årig</span></h2>
</div>

CSS

.card {
  container: card / inline-size;
  min-height: 10vh;
  background: #DDD;
  padding: 1rem;
  display: flex;
  flex-flow: column;
}

.card h2 {
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0;
  background-color: #f001;
  flex: 1 1 auto;
  container: header / inline-size;
}

.card h2 span {
  font-size: 1.5rem;
  line-height: 1.1;
}

@container header (min-width: 1200px) {
  .card h2 span {
    border-bottom: solid blue 4px;
  }
}

@container header (min-height: 200px) {
  .card h2 span {
    color: red;
  }
}