JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="flex">
  <div id="left" class="ui-widget-content">
    <p>リサイズエリア</p>
  </div>
  <div class="right">
    <div class="box">
      <div class="upper">
        <div class="thumb">
          <img src="http://placehold.jp/24/FF0000/ffffff/150x150.png" alt="">
        </div>				
        <div class="titles">
          <div class="title">
            <p>5月19日</p>
          </div>	
          <div class="content">
            <p>今日は良い天気だったので公園に行きました</p>
          </div>	
        </div>
      </div>	
    </div>
  </div>
</div>

CSS

img {
    max-width: 100%;
    max-height: 100%;
}
p {
    margin: 0;
}
.flex {
    display: flex;
    background: lightpink;
    height: 100vh;
}
.upper {
    display: flex;
}
.right {
    padding: 20px;
    width: 100%;
}
#left {
    width: 200px;
    text-align: center;
    background: aquamarine;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
}
.title {
    font-weight: bold;
}
.thumb {
    flex: none;
    float: left;
    max-width: 100px;
    max-height: 100px;
    margin: 0 15px 0px 0;    
    width: calc(20% - 15px); /* 画像を可変的にする */     
}

JavaScript

function my_resizable(){
  $( "#left" ).resizable({
    handles: "e",
    minWidth: 200,
    maxWidth  : $(window).width() - 200,
  });
}

$(document).ready( function() {
  my_resizable();
});

$(document).on('resize', function (e) {
  my_resizable();
});