JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="left"></div>
  <div class="right"></div>
</div>

SCSS

.test {
  display: flex;
  flex-flow: row wrap;
  //align-items: stretch;
  border: 1px dashed #ccc;
  
  .left,
  .right {
    flex: 1 calc((100%/2) - 10px * 2);
    border: 1px solid;
    margin: 5px;
  }
  .left {
    border-color: #f00;
  }
  .right {
    border-color: #00f;
  }
}

JavaScript

(function($) {
  $(function() {
    $(".test").before("<div class='selectImg'>");

    $(".selectImg").append("<form>" +
      "<input type='radio' name='rd' value='left'>Left</input>" +
      "<input type='radio' name='rd' value='right'>right</input>" +
      "</form>");

    var imgSrc = "https://cdn.teratail.com/uploads/avatars/u1/16346/664692dba29fc526_thumbnail.jpg?1465010917",
      text = "abcdef abcdef abcdef abcdef abcdef abcdef abcdef<br>abcdef<br>abcdef<br>abcdef<br>abcdef<br>abcdef<br>abcdef<br>abcdef";

    $(".selectImg input[name='rd']").change(function() {
      $(".test").find(".left,.right").empty();
      console.log($(this).val())
      if ($(this).val() === "left") {
        $(".test").find(".left").append("<img src='" + imgSrc + "'>");
        $(".test").find(".right").html(text+text);
      } else if ($(this).val() === "right") {
        $(".test").find(".left").html(text);
        $(".test").find(".right").append("<img src='" + imgSrc + "'>");
      }
    });

  });
})(jQuery);