JSFiddle - React, Tailwind, and code Playground

by Yonathan Benitah

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <style>
      body,
      html {
        height: 100%;
      }

      .cust-container {
        border: 4px solid red;
        max-height: 800px;
        height: 100%;
        width: 100%;
      }

      .cust-container img {
        max-height: 100%;
        width: auto;

        max-width: 100%;
      }

      .img-container {
        border: 4px solid rgb(94, 97, 94);
        overflow: hidden; /* <-- */
        /* height: calc(100vh - 50px); */
      }

      .left {
        background-color: yellow;
      }
    </style>
    <title>Static Template</title>
  </head>
  <body>
    <div class="cust-container">
      <div class="d-flex h-100">
        <div class="w-50 left"></div>
        <div class="right d-flex flex-column">
          <div class="img-container flex-grow-1">
            <img
              src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
              alt=""
            />
          </div>
          <button class="btn btn-success">
            hello
          </button>
        </div>
      </div>
    </div>
  </body>
</html>