I'm having some trouble aligning two divs within a main tag and another div side by side. I've attempted using various CSS properties like display:inline, flex, float, block, and flex-direction, but nothing seems to be working. Any assistance would be greatly appreciated. Thank you.
CSS:
<div class="flexbox">
<main>
<div class="playlist-box">
<div class="site-playlist">
ex
</div>
</div>
<div class="right-column">
<div class="main-heading">
What I've Been Up To:
</div>
</div>
</main>
</div>
.flexbox {
display: flex;
}
main {
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
}
.site-playlist {
height: 200px;
width: 25%;
margin-left: 0;
padding-left: 5px;
text-align: center;
padding-top: 5px;
overflow: scroll;
}