JSFiddle - React, Tailwind, and code Playground

HTML

<div>

<label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

<label class=label2>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

CSS

div
{
 position: absolute;
 left: 0;
 top:  0;
 bottom: 0;
 width: 200px;
 background: #f0f0f0;
}

span
{
 display: inline-block;
 white-space: normal;
 vertical-align: top;
}

label
{
 margin-top: 10px;
 white-space: nowrap;
}

.label1
{
  display: inline-block;
}

.label2
{
  display: flex;
}