Two or more columns with flex gap in tailwind - html

Question

I created a custom class with .columns with those properties:
.columns {
#apply flex flex-wrap gap-4 sm:gap-8 lg:gap-10
}
When I do basis-1/2 and put some items init I have only one column.
I understand it is because of the gap that extends the width but how can I do it work with a gap on row and column?
Here is the whole code (There will be more items but didn't want to make this post that long):
<div class="columns">
<div class="basis-1/2">
<div class="bg-white rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>

Answer 1

As far as for the row/column, if you want both the card in the same row including the gap classes you had given, just replace flex-wrap with flex-row.
Code given below
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row gap-4 sm:gap-8 lg:gap-10">
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>
Please see code in full view
You can also achieve the same thing in the same column just by changing the flex direction from row to col.