My issue is with a codesnippet in React that acts as a list of TabHeadings. When one heading is clicked, it expands the List to the right (only one visible at a time).
I have set a height for my heading-tab but the list's height exceeds it, causing both to expand to the same height. How do I prevent this?
.container {
display: grid;
grid-template-columns: 294px auto;
}
.heading-tab {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 72px;
width: 294px;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
}
.list-container {
margin-left: 96px;
}<div class="container">
<div class="heading-tab">
<p class="heading-text">Heading One</p>
</div>
<div class="list-container">
<div class="list">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul>
</div>
</div>
</div>