JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
</div>
  <div class= "c">
<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
  </section>
</div>

CSS

nav {
    /* float: left; */
	 height: 100%;
    width: 200px;
    border:1px solid black;
}
.container{
	display: flex;
	height: 100%;
}

section {
    border: 3px solid red;
}
nav ul{
	margin:0;
}