JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Flexbox flex basis bug</title>
    <style>
      div {
        display: flex;
        max-width: 400px;
        border: 1px solid red;
      }
      div > img, div > input {
        flex: 0 0 20%;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <p>The input and image should have the same width.</p>
    <div>
      <input value="input" style="box-sizing: border-box;">
      <img
        src="https://placehold.co/400x300"
        alt="Cute kitten looking lovingly at you"
      />
    </div>
  </body>
</html>