Complex rowspan behaviour

by Aleksey Karagodnikov

HTML

<div class="container">
  <div class="left">
    <img src="https://satyr.io/300x450">
  </div>
  <div class="right">Donec iaculis rutrum lectus molestie commodo. Fusce ultrices eros justo, id bibendum augue malesuada eu. Nulla et lectus consequat justo rutrum mollis. Ut eget ligula orci. Sed vel nibh sit amet nulla rhoncus tincidunt. Donec commodo at sem at sodales.
    Praesent cursus ante in dolor venenatis pulvinar.</div>
  <div class="fluid">Nullam ultricies est non odio posuere dictum. Cras auctor lacus aliquet, varius felis in, commodo est. Suspendisse sed velit eu metus aliquet placerat. Sed scelerisque lectus eu enim malesuada, nec luctus lectus consectetur. Phasellus lectus nisl, cursus
    gravida metus sit amet, auctor posuere neque. Vestibulum ornare neque augue, quis sollicitudin tellus tristique in. Morbi nec luctus nisi.
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.container {
  margin: 5px;
  overflow: auto;
}
.container div {
  padding: 15px;
}
.left {
  background-color: green;
}
.left img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}
.right, .fluid {
  clear: both;
  float: none;
}
.right {
  background-color: gold;
}
.fluid {
  background-color: red;
}
@media(min-width: 480px) {
  .left {    
    float: left;
    width: 330px;
  }
  .right {
    clear: none;
    float: right;  
    width: calc(100% - 330px);
  }
}
@media(min-width: 762px) {
  .fluid {
    clear: none;
    float: right;    
    width: calc(100% - 330px);
  }
}