JSFiddle - React, Tailwind, and code Playground

HTML

<div class='profile clearfix'>
 <div class='photo'>
  <img src='https://lh3.googleusercontent.com/-537hzZa4d6A/UWEtHlVXhsI/AAAAAAAAAWA/tvhSsz2-284/h120/50+copy.png' />
 </div>
 <div class='note'>
  image size 50px x 50px
 </div>
</div>

<div class='profile clearfix'>
 <div class='photo'>
  <img src='https://lh6.googleusercontent.com/-VHAKVXF_n8Q/UWEp0bQ_9jI/AAAAAAAAAVg/D5uszJ04YXA/h120/100x100+copy.jpg' />
 </div>
 <div class='note'>
  image size 100px x 100px
 </div>
</div>

<div class='profile clearfix'>
 <div class='photo'>
  <img src='https://lh3.googleusercontent.com/-4AT9OAiF7Js/UWEq-LvFZSI/AAAAAAAAAVw/Mg6qW6rWEe4/h120/100x200+copy.png' />
 </div>
 <div class='note'>
  image size 100px x 200px
 </div>
</div>



<div class='profile clearfix'>
 <div class='photo'>
  <img src='https://lh5.googleusercontent.com/-ulngf1dbC5g/UWEqRnSJ78I/AAAAAAAAAVo/i_62b2_QClo/h120/200x100+copy.png' />
 </div>
 <div class='note'>
  image size 200px x 100px
 </div>
</div>

CSS

.profile {margin:10px;padding:10px; border:1px solid}
   .profile .photo {
      float:left; 
      width:100px; height:100px; 
      margin-right:10px; 
      
      /* 讓圖片置中 這部分可以自由發揮 看怎樣最適合 */
      text-align:center;
      background:#eee; 
      border:1px solid #aaa;
   }
      
      .profile .photo img {
         max-width:100%; max-height:100%; 
         /* 讓圖片最大只有 100% 的大小，不會破壞排版 */
      } 

   .profile .note {overflow:hidden}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}