JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
<p>
This <code>div</code> should not exceed 400px because the long word has soft hyphens (<code>&amp;shy;</code>).
</p>
<p>
pneumon&shy;oultra&shy;microscopic&shy;silicovolca&shy;noconiosis
</p>
</div>
<div class="reference">
<p>
Exactly 400 px
</p>
</div>
<div class="test">
<p>
Same word again, but without soft hyphens:  
pneumonoultramicroscopicsilicovolcanoconiosis 
</p>
<p>
The long word now determines the width <em>(provided that it's wider than the parent container)</em>.
</p>
<p>
Whenever we want a container to fit its "widest child" like this, we simply tell it to <strong>behave like a table / table cell</strong>.
</p>
</div>

CSS

.test {
  width: 400px;
  display: inline-table; /* table|inline-table|table-cell */
  word-wrap: normal;
  max-width: 100%; /* maybe? */
}


/* demo styles */
html {
  background: #fff;
  font-size: 1.5em;
  font-family: sans-serif;
}
div {
  padding: 1em;
  margin: 1em;
  box-sizing: border-box;
  border: 1em solid #eee;
}
.reference {
  width: 400px;
  background: orange;
  color: #fff;
  text-align: center;
  overflow: hidden;
}