JSFiddle - React, Tailwind, and code Playground

by Osoascam

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="uncle"></div>
<div class="parent">
  <div class="child-01">
    <h1>There's some text</h1>
    <h2>Here's a bit more</h2>
  </div>
  <div class="child-02">
    
  </div>
</div>
<div class="aunt"></div>

CSS

body {
  font-family: sans-serif;
}

h1, h2 {
  font-weight: lighter;
  font-size: 14px;
}

div {
  border: solid 1px rgba(100,100,100,0.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
  width: 100%;
  padding: 10px;
  min-height: 40px;
  margin: 10px 0;
  background: rgba(100,200,255,0.5);
  box-sizing: border-box;
}

.parent {
  min-height: 150px;
}

.child-01 {
  position: absolute;
  width: calc(50% - 20px);
  z-index: -1;
}

.child-02 {
  background: rgb(220, 90, 100);
  width: 150px;
  border-radius: 4px;
  transition: all 1s ease;
  margin-left: calc(100% - 150px);
}

.child-02.open {
  margin-left: 0;
  width: 100%;
  min-height: 200px;
}

JavaScript

$(document).ready(function() {
	$('.child-02').click(function() {
  	$(this).toggleClass('open');
  });
});