Align two vertically-stacked rows of flex items next to one full-height flex item - html

Question

I`m using flexbox and trying to make 6 things like this:
So far this is my code:
<section class="focus-item">
<div class="item focus-item-1">
<h4>Brand </h4>
<p>Identity
aliquam ipsum ante morbi sed ipsum mollis.
Sollicitudin viverra, vel varius eget sit mollis.
</p>
<img src="D:/htmlCss/landing/assets/img/focus-item-1.png" alt="" />
</div>
</section>
CSS
.focus-item {
display: flex;
flex-wrap: wrap;
}
.focus-item .item {
display: flex;
width: 50%;
text-align: left;
}
.focus-item .item p {
display: flex;
flex: 1;
align-items: flex-end;
}
.focus-item .item h4 {
display: flex;
align-items: flex-start;
}
I have problem with placing h4 on top of p. I would be great if someone can point me in the right direction.

Answer 1

As I already posted it in my first comment, you can do it by making the first flex item a flex box as well:
<div class="container">
<div class="item-1">
<h4>Header</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif" />
</div>
.container {
display: flex;
align-items: flex-end;
}
.item-1 {
display: flex;
flex-direction: column;
align-items: flex-end;
}
See here for the working example: http://jsfiddle.net/0j7abre9/1/

Answer 2

The key to this layout is to create one flex container that holds two flex items – the first holding the <h4> and <p>, and the other holding the <img> – and align them in a row. Then convert the first flex item to a flex container as well, and align its two items in a column.
HTML
<section class="focus-item">
<div class="item focus-item-1"><!-- nested flex container 1 -->
<h4>Brand</h4>
<p>Identity aliquam ipsum ante morbi sed ipsum mollis.
Sollicitudin viverra, vel varius eget sit mollis.</p>
</div>
<div class="item focus-item-2"><!-- nested flex container 2 -->
<img src="http://i.imgur.com/60PVLis.png" height="200" width="200" alt="">
</div>
</section>
CSS
.focus-item {
display: flex;
}
.item {
display: flex;
flex: 1 1 50%;
}
.focus-item-1 {
flex-direction: column;
align-items: flex-end;
}
DEMO