JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
  <h4>ONE</h4>
  I'm only 100px wide!
</div>
<div class="two">
  <h4>TWO</h4>
  I'm 500px wide!
</div>

CSS

.one {
  height: 100px;
  max-width: 100px; /* maximum width allowed is 100px */
  width: 500px; /* overridden by the max-width rule */
  background-color: blue;
}

.two {
  height: 100px;
  width: 500px; /* without max-width div will be larger */
  background-color: red;
}