JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-3 debug-outline text-center">
    <h2 class="text-break">First</h2>
  </div>
  <div class="col-sm-3 debug-outline text-center">
    <h2 class="text-break">Secondisquitelonger</h2>
  </div>
  <div class="col-sm-3 debug-outline text-center">
    <h2 class="text-break">Third</h2>
  </div>
  <div class="col-sm-3 debug-outline text-center">
    <h2 class="text-break">Fourth</h2>
  </div>
</div>
<hr>
<div class="d-flex">
  <div class="flex-fill flex-shrink-0 debug-outline">
    <h2>First</h2>
  </div>
  <div class="flex-fill flex-shrink-0 debug-outline">
    <h2>Secondisquitelonger</h2>
  </div>
  <div class="flex-fill flex-shrink-0 debug-outline">
    <h2>Third</h2>
  </div>
  <div class="flex-fill flex-shrink-0 debug-outline">
    <h2>Fourth</h2>
  </div>
</div>

CSS

.debug-outline {
  outline: 1px dashed fuchsia;
}