JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="box" id="box">
  <div class="uglyDot"></div>
  <h3>A pretty long word here</h3>

</div>
<h3 id="test">Small word</h3>

<div class="box" id="box">
  <h3>Small word</h3>
  <div class="uglyDot"></div>
</div>

CSS

.box {
    display: flex;
      justify-content: start;
  background-color: cornflowerblue;
  width: 100%;
  height: 100px;
}

h3 {
  text-align: Center;
}

.uglyDot {

  width: 10px;
  height: 10px;
  background-color: blueviolet;
}

/* Example 
#box{
  display:flex;
  justify-content:center;
}
*/