JSFiddle - React, Tailwind, and code Playground

by evilReiko

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<div class="box">

<div class="box">

<div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-image: url(http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg);">
     <!--<figure>
       <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>-->
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis unde voluptatibus ea, possimus totam blanditiis molestiae doloremque ipsa magni maiores fugit? Impedit expedita aspernatur dignissimos ipsa consectetur accusamus praesentium, saepe, fugit incidunt doloribus. Maxime expedita nesciunt, magni accusamus culpa saepe cupiditate tempora cum soluta natus, ea illo quo! Nulla error repudiandae natus vel dicta sequi molestias, possimus optio a dolore laboriosam eligendi impedit nam dolorum! Temporibus necessitatibus alias ullam reiciendis ipsam id quisquam, repudiandae? Quas doloremque, laboriosam quaerat sed veniam, dolores ea aspernatur velit, accusamus eligendi soluta rerum architecto cum fuga? Explicabo assumenda quisquam laudantium quae...

CSS

.box{
  width:700px;
  margin:30px auto;
}
.tur-list{
  border:1px solid #ccc;
  margin-bottom:15px;
}
img{
width:100%
}


.tur-list {
  display: table;
  width: 100%;
}
.tur-list .row {
  display: table-row;
}
.tur-list .row > div {
  display: table-cell;
  float: none;
  vertical-align: top;
}
.tur-list .row > div:first-child {
    padding-left: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;/* you can also set it to "cover" or "contain"*/
}
.tur-list .row > div:last-child {
    padding-right: 0px;
}

JavaScript

/*function getListHeight() {
    $(".tur-list .col-lg-5 img").each(function() {
        var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
        var getLeftHeight = $(this).parents(".tur-list").find(".col-lg-5 img").outerHeight();
        if (getTurHeight > getLeftHeight) {
            $(this).outerHeight(getTurHeight);
        }
    });
}
$(document).ready(function(){
  getListHeight();
});*/