I am attempting to create a container which has two divs on top and each side, and another content at the bottom. I have done this with flexbox. I can align the bottom content as I want, but the top content, aligns top, but not left and right. I thought that using
justify-content: space-between;
would dot it. I have also tried putting .social div with margin-left: auto;
This is my code:
.boxes {
background-size: cover;
background-position: center center;
display: flex;
align-items: flex-end;
background-color: red;
width: 50%;
}
.branding {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 200px;
}<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>What have I missed out here?
-thanks