title: How to make Tailwind Cards with same height of the title?
body: <p>So I am using Tailwind 1.9.6 and I want to make 3 cards with same height and titles of same height. I want to use flexbox and not grid because of the browser support.</p>
  <p>I have managed to make the cards of same height regardless of the title length, but I would like the clock icon and the published time to also be always on the same height. Right now, the position of the clock icon and date depend on the title length.</p>
  <p>How can that be achieved?</p>
  <p>Here is the Codepen: <a href="https://codepen.io/vladoapost/pen/LYRYgMd" rel="nofollow noreferrer">https://codepen.io/vladoapost/pen/LYRYgMd</a></p>
  <p>And the code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container mx-auto&quot;&gt;
      &lt;div class=&quot;flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap&quot;&gt;
          &lt;div class=&quot;rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10&quot;&gt;
              &lt;img src=&quot;https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd&quot; alt=&quot;People&quot; class=&quot;w-full object-cover h-32 sm:h-48 md:h-64&quot; /&gt;
              &lt;div class=&quot;p-4 md:p-6 bg-white&quot;&gt;
                  &lt;p class=&quot;text-blue-500 font-semibold text-xs mb-1 leading-none&quot;&gt;Teneriffa&lt;/p&gt;
                  &lt;a href=&quot;http://example.test/2020/11/26/hello-world/&quot;&gt;
                      &lt;h3 class=&quot;font-semibold mb-2 text-xl leading-tight sm:leading-normal&quot;&gt;Hello world!&lt;/h3&gt;
                  &lt;/a&gt;
                  &lt;div class=&quot;text-sm flex items-center&quot;&gt;
                      &lt;svg
                          class=&quot;opacity-75 mr-2&quot;
                          xmlns=&quot;http://www.w3.org/2000/svg&quot;
                          xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
                          version=&quot;1.1&quot;
                          id=&quot;Capa_1&quot;
                          x=&quot;0px&quot;
                          y=&quot;0px&quot;
                          width=&quot;12&quot;
                          height=&quot;12&quot;
                          viewBox=&quot;0 0 97.16 97.16&quot;
                          style=&quot;enable-background: new 0 0 97.16 97.16;&quot;
                          xml:space=&quot;preserve&quot;
                      &gt;
                          &lt;path
                              d=&quot;M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823    c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z&quot;
                          &gt;&lt;/path&gt;
                          &lt;path d=&quot;M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832    c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z&quot;&gt;&lt;/path&gt;
                      &lt;/svg&gt;
                      &lt;p class=&quot;leading-none&quot;&gt;26.11.2020, 10:10 Uhr&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10&quot;&gt;
              &lt;img src=&quot;https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd&quot; alt=&quot;People&quot; class=&quot;w-full object-cover h-32 sm:h-48 md:h-64&quot; /&gt;
              &lt;div class=&quot;p-4 md:p-6 bg-white&quot;&gt;
                  &lt;p class=&quot;text-blue-500 font-semibold text-xs mb-1 leading-none&quot;&gt;Gran Canaria&lt;/p&gt;
                  &lt;a href=&quot;http://example.test/2020/11/26/hello-world/&quot;&gt;
                      &lt;h3 class=&quot;font-semibold mb-2 text-xl leading-tight sm:leading-normal&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/h3&gt;
                  &lt;/a&gt;
                  &lt;div class=&quot;text-sm flex items-center&quot;&gt;
                      &lt;svg
                          class=&quot;opacity-75 mr-2&quot;
                          xmlns=&quot;http://www.w3.org/2000/svg&quot;
                          xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
                          version=&quot;1.1&quot;
                          id=&quot;Capa_1&quot;
                          x=&quot;0px&quot;
                          y=&quot;0px&quot;
                          width=&quot;12&quot;
                          height=&quot;12&quot;
                          viewBox=&quot;0 0 97.16 97.16&quot;
                          style=&quot;enable-background: new 0 0 97.16 97.16;&quot;
                          xml:space=&quot;preserve&quot;
                      &gt;
                          &lt;path
                              d=&quot;M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823    c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z&quot;
                          &gt;&lt;/path&gt;
                          &lt;path d=&quot;M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832    c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z&quot;&gt;&lt;/path&gt;
                      &lt;/svg&gt;
                      &lt;p class=&quot;leading-none&quot;&gt;26.11.2020, 10:10 Uhr&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10&quot;&gt;
              &lt;img src=&quot;https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd&quot; alt=&quot;People&quot; class=&quot;w-full object-cover h-32 sm:h-48 md:h-64&quot; /&gt;
              &lt;div class=&quot;p-4 md:p-6 bg-white&quot;&gt;
                  &lt;p class=&quot;text-blue-500 font-semibold text-xs mb-1 leading-none&quot;&gt;Fuerteventura&lt;/p&gt;
                  &lt;a href=&quot;http://example.test/2020/11/26/hello-world/&quot;&gt;
                      &lt;h3 class=&quot;font-semibold mb-2 text-xl leading-tight sm:leading-normal&quot;&gt;Hello world!&lt;/h3&gt;
                  &lt;/a&gt;
                  &lt;div class=&quot;text-sm flex items-center&quot;&gt;
                      &lt;svg
                          class=&quot;opacity-75 mr-2&quot;
                          xmlns=&quot;http://www.w3.org/2000/svg&quot;
                          xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
                          version=&quot;1.1&quot;
                          id=&quot;Capa_1&quot;
                          x=&quot;0px&quot;
                          y=&quot;0px&quot;
                          width=&quot;12&quot;
                          height=&quot;12&quot;
                          viewBox=&quot;0 0 97.16 97.16&quot;
                          style=&quot;enable-background: new 0 0 97.16 97.16;&quot;
                          xml:space=&quot;preserve&quot;
                      &gt;
                          &lt;path
                              d=&quot;M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823    c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z&quot;
                          &gt;&lt;/path&gt;
                          &lt;path d=&quot;M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832    c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z&quot;&gt;&lt;/path&gt;
                      &lt;/svg&gt;
                      &lt;p class=&quot;leading-none&quot;&gt;26.11.2020, 10:10 Uhr&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>