Flexbox header: Align box right with two elements in rows - css

Question

Just starting out with Flexbox. Practicing by trying to create a very simple CV website.
Codepen is here:
http://codepen.io/koentj/pen/jyLxGX
I'm trying to get the social-container to the left of the picture-container. Both of these are within the profile-container, while giving name-container most of the space (aka profile-container will use what it needs, and name-container takes the rest).
Whatever I do (and I've tried a bunch), the social-container ends up above the picture-container and I feel like I'm missing something extremely rudimentary.

Answer 1

I'm not entirely sure if your HTML is reflecting what you are trying to do. Currently it's like this:
- header
-- .name-container
-- .profile-container
--- .social-container
---- .picture-container
It would be easier if .picture-container would be a sibling of .social-container rather than a child element.
That way you could use display: flex for .profile-container and would get the two elements side by side.
body {
display: flex;
flex-direction: column;
font-family: "Helvetica Neue, Helvetica, Liberation Sans, Arial, sans-serif";
}
header {
background: #42A8C0;
width: 100%;
color: white;
text-align: center;
}
img {
max-width: 100%;
}
.profile-container {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header>
<div class="name-container">
<h1>My Name</h1>
<h4>Small summary of current position</h4>
</div>
<div class="profile-container">
<div class="social-container">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
<i class="fa fa-github-square" aria-hidden="true"></i>
</div>
<div class="picture-container">
<img src="https://cdn.pixabay.com/photo/2016/02/22/18/57/puppy-1216269_960_720.jpg" class="portrait-pic">
</div>
</div>
</header>