JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div class="obj-wrapper">
 <div class="content">1.1 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">1.2 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">1.3 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">2.1 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">2.3 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">3.1 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">3.2 Image</div>
</div>
<div class="obj-wrapper">
 <div class="content">3.3 Image</div>
</div>

CSS

.obj-wrapper {
    float:left;
    position:relative;
    width:33.33%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    border:1px solid gray;
    position:absolute;
    width:100%;
    height:100%;
    background:#cc0000;
    padding:6px;
    margin:0px;
  }

JavaScript

$('.obj-wrapper :eq(3)').after('<div class="obj-wrapper"> <div class="content" style="background:rgb(35, 31, 32);color: rgb(255, 255, 255);">2.2 Content</div></div>');