CSS: How to avoid height expansion of flex-row by child margin?

Question

<div class="flex flex-row bg-blue-100 box-border">
  <p class="bg-red-100 m-5">
    test1
  </p>
  <p class="bg-red-100 m-5">
    test2
  </p>
</div>

Result:

What I Need:

Answer 1

Consider doing what @justanotherpeter suggested in the comments, but also adding the vertical margin on the parent to maintain the spacing required:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-row bg-blue-100 box-border my-5">
  <p class="bg-red-100 mx-5">
    test1
  </p>
  <p class="bg-red-100 mx-5">
    test2
  </p>
</div>