JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tileWide">
  <div class="tileInner">
    <div class="tileIdentification" style="display: none;">
      <div class="tileIdentificationText" style="display: none;"></div>
    </div>
    <div class="tileIcon" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"></path></svg></div>
    <div class="tileImage" style="display: none;"></div>
    <div id="slider">
      <div class="sliderDiv">
        <div class="tileCaption" style="margin-top: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Pittcon 2018 – boost efficiency for the future</div>
        <div class="tileDetails" style="margin-top: 10px">
          <div class="tileDetailsIcon" style="display: none"></div>
          <div class="tileDetailsText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Heimberger, Sven (Non-A-Germany.ex1) 11/12/2018, 12:53 pm</div>
        </div>
      </div>
      <div class="sliderDiv">
        <div class="tileCaption">Enhanced LC customer demo possibilities for EMEA and EMEA IDO in Waldbronn</div>
        <div class="tileDetails" style="margin-top: 10px">
          <div class="tileDetailsIcon" style="display: none"></div>
          <div class="tileDetailsText">Heimberger, Sven (Non-A-Germany.ex1) 07/10/2018, 12:52 pm</div>
        </div>
      </div>
      <div class="sliderDiv">
        <div class="tileCaption">Director analysis of in-process oligonucleotides withou a manual</div>
        <div class="tileDetails">
          <div class="tileDetailsIcon" style="display: none"></div>
          <div class="tileDetailsText">Heimberger, Sven (Non-A-Germany.ex1) 07/10/2018, 12:51 pm</div>
        </div>
      </div>
    </div>
    <div class="tileDescription">
      <div...

CSS

* {
  font-family: 'Arial', sans-serif;
}

body {
  background: #E6E6E6;
}

.tileWide {
  width: 340px;
  height: 162px;
  background: white;
  display: flex;
  align-items: center;
  float: left;
  margin-right: 10px;
  border-bottom: 2px solid #1089D4;
  margin-bottom: 10px;
  position: absolute;
  overflow: hidden;
}

.tileWide .tileInner {
  width: 300px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.tileWide .tileIcon,
.tileWide .tileIdentification {
  display: none;
}

.tileWide .tileImage {
  width: 60px;
  height: 60px;
  background: #1089D4;
  float: left;
  margin-right: 10px;
}

.tileWide .tileCaption {
  width: 230px;
  color: #3a3a3a;
  font-weight: bold;
  font-size: 12pt;
  text-align: left;
  float: left;
  margin-bottom: 10px;
  display: block;
  margin-top: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileWide .tileDetails {
  width: 230px;
  height: 20px;
  display: flex;
  align-items: center;
  float: left;
  margin-top: 10px;
}

.tileWide .tileDetailsIcon {
  width: 17px;
  height: 17px;
  float: left;
  margin-right: 5px;
  fill: #a2a2a2;
}

.tileWide .tileDetailsIcon svg {
  width: 17px;
  height: 17px;
  float: left;
  margin-right: 5px;
}

.tileWide .tileDetailsText {
  font-size: 10pt;
  color: #a2a2a2;
  text-align: left;
  float: left;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileWide .tileDescription {
  width: 100%;
  height: 25px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

.tileWide .tileDescriptionIcon {
  width: 25px;
  height: 25px;
  fill: #1089D4;
  margin-right: 10px;
}

.tileWide .tileDescriptionText {
  height: 25px;
  color: #1089D4;
  font-weight: bold;
  font-size: 9pt;
  line-height: 26px;
  text-transform: uppercase;
}

.tileWide .tileNotification {
  width: 25px;
  height: 25px;
  font-size: 9pt;
  position: absolute;
  right: 0;
  background: #A9C8DE;
  border-radius: 50%;
 ...

JavaScript

var dotContainer = '<div class="dotContainer">' +
  '<div class="dot" style="background: #1089D4"></div>' +
  '<div class="dot"></div>' +
  '<div class="dot"></div>' +
  '</div>';

$(".tileWide").find(".tileInner").after(dotContainer);

var slider = '<div class="tileInner"><div id="wrapper"><div id="slider">';
var captions = new Array(3);
var details = new Array(3);

$(".tileCaption").each(function() {
  for (var i = 0; i < $(".tileCaption").length; i++) {
    $(this).css("display", "block");

    captions[i] = $(this)[0].outerHTML;
  }

  $(this).remove();
});

$(".tileDetails").each(function() {
  for (var i = 0; i < $(".tileDetails").length; i++) {
    $(this).css("display", "block");

    details[i] = $(this)[0].outerHTML;
  }

  $(this).remove();
});

for (var i = 0; i < captions.length; i++) {
  slider += '<div>' + captions[i] + details[i] + '</div>';
}

slider += '</div></div></div>';

console.log(slider);

$(".tileInner").eq(0).after(slider);

var sliderWidth = 340;
var slider = $("#slider");
var sliderCount = $(".sliderDiv").length;

slider.width(sliderCount * sliderWidth);

$(".dot").on("click", function() {
  $(".dot").css({
    "background": "#DCDCDC",
    "cursor": "pointer",
    "pointer-events": "auto"
  });

  $(this).css({
    "background": "#1089D4",
    "cursor": "default",
    "pointer-events": "none"
  });

  if ($(this).index() == 0) {
    $("#slider").animate({
      left: ($(".sliderDiv").eq($(this).index()).offset().left - ($("#slider div").offset().left) + "px")
    }, 500);
  }

  if ($(this).index() == 1) {
    $("#slider").animate({
      left: (-1 * ($(".sliderDiv").eq($(this).index()).offset().left - ($("#slider div").offset().left)) + "px")
    }, 500);
  }

  if ($(this).index() == 2) {
    $("#slider").animate({
      left: (-1 * ($(".sliderDiv").eq($(this).index()).offset().left - ($("#slider div").offset().left)) + "px")
    }, 500);
  }
});