title: How do I move content of one div over another using CSS?
body: <p>I have the following code :</p>
  
  <pre><code>&lt;div class="main"&gt;
    &lt;div class="first_div"&gt;
        &lt;div class="nested_first"&gt;
        &lt;/div&gt;
        &lt;div class="nested_second"&gt;
            Hello World
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>.main{
    display: inline-block;
    width: 500px;
    height: 100px;
  }
  .nested_first {
    position: absolute;
    width: 40%;
    height: 100%;
    background-color: white;
  }
  
  .nested_second {
    width: 32.5rem;
    border: 3px solid $white;
    height: 100%;
  }
  
  .first_div {
    position: relative;
    height: 7rem;
    width: 100%;
    margin: 1rem;
    box-shadow: 0 0 .3rem 0 rgba(0, 0, 0, 0.3);
    &amp;:hover {
      cursor: pointer;
      .planTitle {
        color: $forest;
      }
      .planChannels {
        color: black;
      }
    }
  }
  </code></pre>
  
  <p>Because of this, I can't see the content of nested_second. How can I make it visible just using HTML and CSS.</p>
  
  <p>The pen of this code is as follows :
  <a href="http://codepen.io/ajaygaur319/pen/oLgOyp" rel="nofollow">code</a></p>