４つのdivを均等に並べたい。

Question

<div class="catp">
                <div class="catt">
                    <img src="cat-2.png">
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <img src="cat-3.png">
                </div>
                </div>```

.catp {
    display:flex;
    flex-wrap:wrap;
}

.catt {
   flex:300px;
    margin-left:180px;
    margin-bottom:50px;
}

.catpというクラスの中に、　cattという４つのクラスがあります。
この４つを２つで、折り返して、均等に並べたいです。
当方の指定したcssで、半分は、できているのですが、マージンを設定したりして、手間がかかってしまうので、flexible-boxを使って、簡単に表示させる方法を教えてください。

Answer 1

最終的にどうしたいかよく分からないですが、とりあえず下記でどうでしょう。

.catp {  
  display:flex;  
  flex-wrap:wrap;
  gap: 50px 180px
}  

.catt {  
  flex:1 0 calc(50% - 180px);
}