JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="checkbox"/>
<label for="checkbox">Add max-width:100% to .icon </label><br/>


<div class="item">
  <img class="icon"  />
  <span>Hello World !!!</span>
</div>

<br/>

<div class="item">
  <div class="icon"></div>
  <span>Hello World !!!</span>
</div>

CSS

.item {
  border: 1px solid black;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: min-content;
}

.icon {
  background: green;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

input:checked ~ .item > .icon {
  max-width: 100%;
}