JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div class="container">
  <h1>Heading title</h1>
  <br/>
  <div class="defined-width-for-heading">
    <span class="sub">Some random text under heading title</span>
  </div>
  
</div>

CSS

body {
  background: #111111;
}
.container {
  width: 338px;
  height: 600px;
  background-color: #000;
  font-family: Arial;
  text-align: center;
}
h1 {
  font-weight: bold;
  font-size: 48px;
  background-color: #fff;
  display: inline;
  line-height: 95px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 10px 20px 10px 20px;
}

.defined-width-for-heading {
  width: 300px;
}

.sub {
  display: inline;
  background-color: #fff;
  font-size: 28px;
  padding: 20px 20px;
  line-height: 90px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}