JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<main class="grid">
    <aside class='left'>
        <div class="left_inner">
      drag the bottom right handle to resize
         </div>
    </aside>
    <article class="right_bottom">
      <div class="right_bottom_inner">right_bottom_inner</div>
    </article>
  </main>

  <main class="grid">
    <aside class='left'>
        <div class="left_inner">
      drag the bottom right handle to resize
         </div>
    </aside>
    <article class="right_bottom">
      <div class="right_bottom_inner">right_bottom_inner</div>
    </article>
  </main>

CSS

/* CSS */
body {
  padding:0;
  margin:0;
}
	.grid {
		display: grid;
		grid-template-columns: 0 0;
		grid-template-rows: 0 0;
		position: relative;
	}

	.left {
	  max-width:50vw;
    max-height:50vh;
    min-width:0vw;
    min-height:0vh;
		grid-row: 1 / 1;
	}

	.right_bottom {
		grid-column: 1;
		grid-row: 1;
	}

	.left_inner {
		background-color: #fedcd2;
		padding: 0;
		width: 100%;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		text-align: center;
	}

	.right_top_inner {
		background-color: #f9cf00;
		padding: 0;
		width: 100%;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		text-align: center;
	}

	.right_bottom_inner {
		background-color: #f8eee7;
		padding: 0;
		width: 100%;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		text-align: center;
	}

JavaScript

$('.left_inner').resizable();
$('.right_top_inner').resizable();
$('.right_bottom_inner').resizable();