title: Clear Bottom Of A Element
body: <p>I'm new to HTML and CSS. My problem is how to clear the bottom of the div element width
  text class to move the left-div-inside-span (child of main-span class) at the end of the transparent box?
  These are the HTML and CSS codes I demonstrate below. I uploaded the output of the code in the image via a link. Please check them and show me a guide.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    height: 100%;
    border: 10px groove darkblue;
    background: powderblue;
    color: #9932CC;
    font-family: 'Trebuchet MS', sans-serif;
    overflow: auto;
  }
  
  body {
    height: 100%;
    border: 5px double darkgreen;
    background: #3a768520;
    overflow: inherit;
  }
  
  div.header {
    background: #112244;
    position: relative;
    top: 2px;
    border-top: 10px double crimson;
    border-bottom: 10px double crimson;
    margin-right: 5px;
    width: 100%;
    border-radius: 2%;
  }
  
  h1 {
    height: 50px;
    line-height: 50px;
    font-size: 1rem;
    position: relative;
    border-left: 4px outset #fffbf9;
    display: flex;
  }
  
  h1::before {
    content: '\004f';
    color: #eee;
    background: dodgerblue;
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 2rem;
    margin-right: 5px;
    text-decoration: underline #E9967A 2px;
    text-underline-offset: 0.4rem;
  }
  
  span.main-span {
    display: flex;
    position: relative;
    top: 30px;
    height: 65vh;
    background: #11464175;
    margin-left: 5px;
    margin-right: 5px;
    border-right: 10px double #f02a6cfd;
    overflow: auto;
    color: lightblue;
    padding-top: 10px;
    padding-left: 10px;
    font-family: cursive;
    letter-spacing: 1px;
    word-spacing: 2px;
  }
  
  span.text em {
    color: coral;
    font-size: 1.2rem;
  }
  
  div.main-flex {
    background: olive;
    width: 25%;
    height: 97.5%;
    border: 4px double #80000080;
    position: relative;
    right: 5px;
    display: flex;
  }
  
  div.main-flex&gt;div {
    width: 30%;
    height: 100%;
  }
  
  div.main-flex&gt;div:nth-of-type(1) {
    background: olive;
  }
  
  div.main-flex&gt;div:nth-of-type(2) {
    background: powderblue;
  }
  
  div.main-flex&gt;div:nth-of-type(3) {
    background: coral;
  }
  
  div.main-flex&gt;div:nth-of-type(4) {
    background: darkblue;
  }
  
  div.main-flex&gt;div:nth-of-type(5) {
    background: darkred;
  }
  
  div.main-flex&gt;div:nth-of-type(6) {
    background: darkorange;
  }
  
  span&gt;div.left-div-inside-span {
    width: 200px;
    height: 100px;
    background: cyan;
    margin-top: auto;
    position: relative;
    bottom: 10px;
    border: 4px double blueviolet;
    margin-right: auto;
  }
  
  span.main-span&gt;span.text {
    background: rgb(58, 55, 21);
    display: flex;
    height: 100px;
    width: 400px;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;h1&gt;Multiple Display Vlaues ...&lt;/h1&gt;
  &lt;/div&gt;
  &lt;span class="main-span"&gt;
          &lt;span class = "text"&gt;&amp;#8212;This is a text inside&amp;nbsp;&lt;em&gt;span&lt;/em&gt;&amp;nbsp;tag.&lt;/span&gt;
  &lt;div class="left-div-inside-span"&gt;&lt;/div&gt;
  &lt;div class="main-flex"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>