JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div class="wrapper">
  <div class="item">
  <!-- Part of line 4 includes new code -->
    <div class="info inherit-wrapper" wrapper-property="width">
    
    </div>
  </div>
  
  <div class="item">
    <div class="info is-hidden">
    
    </div>
  </div>
  
  <div class="item">
    <div class="info is-hidden">
    
    </div>
  </div>
  
  <div class="item">
    <div class="info is-hidden">
    
    </div>
  </div>
  
  <div class="item">
    <div class="info is-hidden">
    
    </div>
  </div>
  
  <div class="item">
    <div class="info is-hidden">
    
    </div>
  </div>
</div>

CSS

.wrapper {
  width:500px;
  background:white;
  height:500px;
}

.item {
  float:left;
  width: 18%;
  margin-right:2%;
  height:120px;
  background:red;
  margin-bottom:2%;
  position: relative;
}

.info {
  height:20px;
  background:blue;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 9;  /* NEW CODE */
}

.info-top {
  top: 0; !important
}

.info.is-hidden {
  display:none;
}

JavaScript

$(document).ready(function(){
	$(".item").each(function(){
  	var $this = $(this);
    $this.click(function(){
    	$(".info").toggleClass('info-top');
      $(".info").toggleClass('is-hidden');
    	$this.find(".info").removeClass('info-top');
    	$this.find(".info").toggleClass('is-hidden');
    });
  });
});

// NEW CODE BELOW
$('.inherit-wrapper').each(function( element ) {
    var $this = $(this),
        property = $this.attr('wrapper-property'),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
}); 


// From http://stackoverflow.com/questions/34344341/how-to-style-a-div-underneath-another-div-in-a-fluid-layout