JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="left">
    left
    <img src="https://img5.goodfon.ru/wallpaper/nbig/3/73/abstraktsiia-antisfera-vodovorot-krasok-kartinka-chernyi-fon.jpg">
  </div>
  <div class="right">
    right
    <form>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="submit"></div>
    </form>
  </div>
</div>

CSS

.main{
  width:100%;
  display:flex;
  flex-direction: row;
}

.left{
  width:50%;
  flex-grow:1;
}
.right{
  width:50%;
  flex-grow:1;
}

.left img{
  width:100%;
}

.right form, .right input{
  width:100%;
}

@media (max-width: 500px) {
  .main{
    flex-direction: column;
  }
  
}