[Vuejs]-Tailwind/Vue dynamicaly align flex items to same high as neighbor

by

2👍

✅

You can chunk the loop by 2 and then do the following. See demo.

<div class="p-4 space-y-4">
  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum assumenda eaque veritatis, porro culpa reprehenderit nisi. Iusto labore ex culpa excepturi velit eos a consequatur beatae aliquam, vero quidem ut.Beatae dolores eligendi accusantium delectus fugiat ex iure vero quam doloribus quo sapiente, necessitatibus fuga! Voluptatibus eaque aut quis omnis magni dolorum iusto delectus laborum, nesciunt id quia praesentium rerum?</div>
    <div class="flex w-1/2 border p-4">small content</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">small content</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eum saepe natus, numquam quibusdam praesentium, incidunt debitis at, nihil similique quidem doloribus? Natus delectus vero quidem, autem fugiat amet odit. Maxime dolorum nostrum vitae adipisci, exercitationem corporis iure, repellat sunt quidem numquam voluptatem beatae dignissimos aliquid suscipit laboriosam modi quibusdam excepturi possimus voluptatibus voluptas deleniti maiores saepe atque doloremque. Totam. Fuga dignissimos ducimus dicta pariatur temporibus dolor commodi soluta. Expedita neque hic explicabo deleniti laudantium animi nesciunt aut vero. Deserunt, sint. Deleniti illum optio rem unde placeat ab eos fuga. Cumque illum odio, consequuntur repudiandae quis error fugit deserunt velit modi illo soluta nihil architecto, ex cum nesciunt, ad laboriosam. Ex nihil unde modi facere quibusdam, nesciunt quod aliquid voluptatum.</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>
</div>
👤Digvijay

1👍

You can see sample code here.
For dynamic data, you can write as follows.

<div class="grid grid-cols-2">
  <div v-for="item in items">
   <div class="border p-4 rounded-lg m-3">
    A lot content
   </div>
  </div>
</div>
👤Khin Me Me Latt

Leave a comment