CSS Flex One Large Div слева и два маленьких Div справа

Question

Я знаю, что могу легко добиться такого типа макета, используя css float, который является текущим способом, которым у меня есть div-ы, имеют макет прямо сейчас. Но я пытаюсь перекодировать его и изменить его на гибкое выравнивание.

Вот моя разметка:

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 1</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 2</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 3</h2></div>
        </a>        
    </div>
</div>

А вот и мой CSS:

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}

.the-post-inner a {
    margin-bottom: 4%;
}

.the-post-inner a .image {
      padding-bottom: 60%;
}

.the-post-inner a .content {
      padding: 20px;
}

.the-post-inner a .content h2 {
      margin: 0;
}

.the-post-inner a:first-child {
    flex: 0 0 60%;
    margin-right: 4%;
}

.the-post-inner a:not(:first-child) {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;

    overflow: hidden;
    float: left;
    display: block;
}

Я попробовал несколько кодов, основанных на ответах в других постах, но я не могу заставить эту работу.

Заранее спасибо за предложения.

EDIT:

Мне было интересно, есть ли способ достичь этого без изменения текущей разметки, которая не состоит в том, чтобы отделить левый пост в другом div и правый пост в другом контейнере.

https://jsfiddle.net/pextb1of/

Answer 1

Я только что исправил. возможно поможет вам.

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    height: 100px;
    border: 1px solid #000;
}

a {
    /*border: 1px solid #000;*/
    margin-bottom: 4%;
    /*padding: 20px;*/
}

.the-post-inner {
    flex: 0 0 60%;
    margin-right: 4%;
}

.sec-inner {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;
    flex-direction: column;

    overflow: hidden;
    float: left;
    display: flex;
}



#the-posts{
  display: flex;
  flex-direction: row;
}

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">Post 1</a>
        
    </div>
    <div class="sec-inner">
        <a href="#">Post 2</a> 
        <a href="#">Post 3</a>
    </div>
</div>