JSFiddle - React, Tailwind, and code Playground

by narthur

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="more">More</button>
<button type="button" id="less">Less</button>

<div class="outer">
<div class="carousel">
<img src="https://unsplash.it/500/300" />
</div>
<div class="cards">
</div>
</div>

CSS

div {
  margin: .5rem;
  border: 2px dotted grey;
}

.outer {
  display:flex;
  max-height:20rem;
}

.carousel {
  flex: 1 1 80%;
  display: flex;
}

img {
  max-width: 100%;
  align-self: flex-start;
}

.cards {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

JavaScript

jQuery("#more").click(function(){
	addItem();
});

jQuery("#less").click(function(){
  jQuery(".card").last().remove();
});

function addItem() {
var n = jQuery(".card").length + 1;
  jQuery(".cards").append("<div class='card'>"+n+"</div>");
}

addItem();