JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<article id="post-313" class="col-md-12 l-post post post--short post-type--post">
        <div class="l-post-thumbnail col-md-4 col-xs-12">
        <div class="post-thumbnail">
            <img src="http://martinsolutionsrd.com/wp-content/uploads/2016/05/para1.png" alt="Image for Remove all comments from your project" class="post-thumbnail__image" > 
        </div>
    </div>
    <div class="l-post-description col-md-8 col-xs-12">
        <div class="post-description">
            <div class="post-title">
                <h3 class="post-title__header">
                    <a class="post-title__link" href="#">Remove all comments from your project</a>
                </h3>
            </div>
            <div class="post-meta">
                <a href="#" class="post-meta__link is-first-item">
                    <span class="post-meta__icon fa fa-user"></span>
                    CROSP
                </a>
                <a href="#" class="post-meta__link">
                    <span class="post-meta__icon fa fa-calendar"></span>
                    June 27, 2016
                </a>
                <a href="#" class="post-meta__link">
                    <span class="post-meta__icon fa fa-comment"></span>
                    2
                                            Comments
                                    </a>
            </div>
            <div class="post-content">
                <p class="post-content__text">
                    Sometimes you need to do such weird things like remove all comments from your project.
This may mean that you have reached the highest level of writing code, so no one need comments to understand written in the source files.    Sometimes you need to do such weird things like remove all comments from your project.
This may mean that you have reached the highest level of writing code, so no one need comments to understand written...

CSS

/* Post module */
.l-post {
  margin-bottom: 1.875em;
  padding: 0 !important; }
  @media only screen and (max-width: 560px) {
    .l-post.post--short {
      padding-right: 0;
      padding-left: 0; } }
  .l-post-thumbnail {
    padding: 0;
    margin: 0; }

/* Post content */
@media only screen and (max-width: 560px) {
  #main-content {
    padding: 0; } }

.l-sidebar {
  margin-bottom: 2.5em; }

.l-header {
  height: 90%;
  width: 100%; }
  @media only screen and (max-width: 560px) {
    .l-header {
      height: 100%; } }
  @media only screen and (min-width: 1440px) {
    .l-header {
      height: 60%; } }
  @media only screen and (min-width: 1600px) {
    .l-header {
      height: 40%; } }
  .l-header-content {
    font-size: 1.6rem;
    display: table;
    width: 100%;
    position: relative; }
    .l-header-content .header-content__wrapper {
      width: 100%;
      height: 100%;
      display: table-cell;
      vertical-align: middle; }

.l-footer {
  position: relative;
  padding: 3rem 0;
  background-color: #081c24; }
  .l-footer .social-icons {
    padding-right: 1.875em;
    text-align: right; }
    @media only screen and (max-width: 992px) {
      .l-footer .social-icons {
        display: block;
        margin: 2rem 0;
        text-align: center; } }
  .l-footer .copyright {
    text-align: left; }
    @media only screen and (max-width: 992px) {
      .l-footer .copyright {
        text-align: center;
        display: block; } }

.l-blog-pagination {
  text-align: center; }

.l-search-form {
  width: 100%; }
  .l-search-form .search-form__input {
    width: 50%; }
    @media only screen and (max-width: 480px) {
      .l-search-form .search-form__input {
        display: block;
        width: 70%;
        margin: 0 auto; } }
  @media only screen and (max-width: 480px) {
    .l-search-form .search-form__submit {
      margin: 0.625em auto;
      display: block; } }

/* Post module */
.post {
  overflow: hidden;
  background-color: #fff;
  border: 1px...

JavaScript

$(document).ready(function(){
	if ($(window).width() >= 991){
		equalHeightt();
	}
  
  else {
  $('.post-thumbnail__image').height('auto');
  $('.post-thumbnail--image').width('100%');
  }
});

$(window).resize(function(){
	if ($(window).width() >= 991){
		equalHeightt();
	}
  
   else {
  $('.post-thumbnail__image').height('auto');
  $('.post-thumbnail--image').width('100%');
  }
  
});

function equalHeightt()
{
		  var tallest = 0;
 $('.l-post-description').each(function() {
	  /*if ($(this).find('.article-text').height() > tallest) {
	   tallest = $(this).height();
	  }  */
	  
	  if($(this).height() > tallest){
		  	   tallest = $(this).height();
	  }
	  
	  
	  //$(this).find('.col .item').css('min-height', tallest + 'px');
 });
 
 	  console.log(tallest);
	  
	  $('.post-thumbnail__image').css('height', tallest + 'px');
}



$(document).ready(function(){
	if ($(window).width() > 991){
		equalHeightt();
	}
  
   else {
  $('.post-thumbnail__image').height('auto');
  $('.post-thumbnail--image').width('100%');
  }
});

$(window).resize(function(){
	if ($(window).width() > 991){
		equalHeightt();
	}
  
   else {
  $('.post-thumbnail__image').height('auto');
  $('.post-thumbnail--image').width('100%');
  }
});