JSFiddle - React, Tailwind, and code Playground

by leggett

HTML

<table>
  <tr>
    <td class="img">
      <img style="max-width: 100px" src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png" />
    </td>
    <td class="text">
      TD:has(IMG) {width:40px; background: #ddd;}<br />IMG {max-width:100px}
    </td>
  </tr>
</table>
<table>
  <tr>
    <td class="img">
      <img style="max-width: 100%" src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png" />
    </td>
    <td class="text">
      TD:has(IMG) {width:40px; background: #ddd;}<br />IMG {max-width:100%}
    </td>
  </tr>
</table>
<table>
  <tr>
    <td class="img">
      <img style="max-width: max(100%, 100px)" src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png" />
    </td>
    <td class="text">
      TD:has(IMG) {width:40px; background: #ddd;}<br />IMG
      {max-width:max(100%, 100px)}
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <img src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png" />
    </td>
    <td class="text">TD:has(IMG) {}<br />IMG {}</td>
  </tr>
</table>
<table>
  <tr>
    <td class="img">
      <img src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png" />
    </td>
    <td class="text">
      TD:has(IMG) {width:40px; background: #ddd;}<br />IMG {}
    </td>
  </tr>
</table>

CSS

table {
  border-spacing: 0;
  margin-bottom: 20px;
}

.img {
  width: 40px;
  background: #ddd;
}

.text {
  background-color: #cc0000;
  width: auto;
  color: white;
  font-family: monospace;
  font-size: 16px;
  padding: 20px 100px;
  min-width: 500px;
}