title: Align column elements bottom - WordPress CSS
body: <p>I am using Wordpress with a theme called Flatsome. I know how to use CSS but because of the HTML and CSS Wordpress and the theme creates I have no clue how to fix this.</p>
  <p>I have one row with three equal sized columns. But the text for some products is much longer than for other products as you can see in my example. I have already tried to apply <code>display: flex</code> and <code>flex: 1 1 auto</code> to the <code>div</code>s but this will just led to the problem to either <code>align-self: start</code> or <code>align-self: end</code> the whole column.</p>
  <p>But my goal is to have <strong>just the button</strong> aligned at the same <code>y</code> line in each column. So they should always be aligned vertically at the same <code>y</code> coordinate independently from the size and length of the text above.</p>
  <p>How is this possible? Here my HTML and CSS (I just copied the WordPress CSS, don't wonder why it is so long)</p>
  <p>Please expand the snippet otherwise the columns will be displayed in a mobile layout!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://www.digital-media-products.de/mycss.css"/&gt;
  
  &lt;div class="related related-products-wrapper product-section" style="background-color: white"&gt;
  
                      &lt;h3 class="product-section-title container-width product-section-title-related pt-half pb-half uppercase"&gt;
                  Products        &lt;/h3&gt;
          
  
      
    
      &lt;div class="row equalize-box large-columns-5 medium-columns-3 small-columns-2 row-small"&gt;
    
          
                      
  &lt;div class="product-small col has-hover product type-product post-10755 status-publish instock product_cat-schwarztee has-post-thumbnail taxable shipping-taxable purchasable product-type-simple"&gt;
      &lt;div class="col-inner"&gt;
      
  &lt;div class="badge-container absolute left top z-1"&gt;
  &lt;/div&gt;
      &lt;div class="product-small box "&gt;
          &lt;div class="box-image"&gt;
              &lt;div class="image-zoom-fade"&gt;
                  &lt;a href="https://dertee.de/shop/fluffy-berry/"&gt;
                      &lt;img src="https://picsum.photos/1000/1000" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="1000"&gt;             &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="image-tools is-small top right show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools is-small hide-for-small bottom left show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover"&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;&lt;!-- box-image --&gt;
  
          &lt;div class="box-text box-text-products text-center grid-style-2"&gt;
              &lt;div class="title-wrapper"&gt;     &lt;p class="category uppercase is-smaller no-text-overflow product-cat op-7"&gt;
              Schwarztee      &lt;/p&gt;
      &lt;p class="name product-title" style="height: 23px;"&gt;&lt;a href="https://dertee.de/shop/fluffy-berry/"&gt;Fluffy Berry&lt;/a&gt;&lt;/p&gt;&lt;i id="product-subtitle-10755" class="product-subtitle subtitle-10755"&gt;Heidelbeere + Cranberry + Sahne&lt;/i&gt;&lt;/div&gt;&lt;div class="price-wrapper" style="height: 34px;"&gt;&lt;p class="price"&gt;&lt;span class="woocommerce-Price-amount amount"&gt;10,95&amp;nbsp;&lt;span class="woocommerce-Price-currencySymbol"&gt;€&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;div class="wgm-info woocommerce-de_price_taxrate "&gt;&lt;/div&gt;
          &lt;div class="wgm-info woocommerce_de_versandkosten"&gt;zzgl. &lt;a class="versandkosten" href="https://dertee.de/versand-und-zahlung/" target="_blank"&gt;Versand&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;div class="add-to-cart-button" style="height: 98px;"&gt;&lt;a href="?add-to-cart=10755" data-quantity="1" class="primary is-small mb-0 button product_type_simple add_to_cart_button ajax_add_to_cart is-outline" data-product_id="10755" data-product_sku="" aria-label="„Fluffy Berry“ zu deinem Warenkorb hinzufügen" rel="nofollow"&gt;In den Warenkorb&lt;/a&gt;&lt;/div&gt;     &lt;/div&gt;&lt;!-- box-text --&gt;
      &lt;/div&gt;&lt;!-- box --&gt;
          &lt;/div&gt;&lt;!-- .col-inner --&gt;
  &lt;/div&gt;&lt;!-- col --&gt;
  
          
                      
  &lt;div class="product-small col has-hover product type-product post-10758 status-publish instock product_cat-schwarztee has-post-thumbnail taxable shipping-taxable purchasable product-type-simple"&gt;
      &lt;div class="col-inner"&gt;
      
  &lt;div class="badge-container absolute left top z-1"&gt;
  &lt;/div&gt;
      &lt;div class="product-small box "&gt;
          &lt;div class="box-image"&gt;
              &lt;div class="image-zoom-fade"&gt;
                  &lt;a href="https://dertee.de/shop/el-guapo/"&gt;
                      &lt;img src="https://picsum.photos/1000/1000" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="1000"&gt;             &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="image-tools is-small top right show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools is-small hide-for-small bottom left show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover"&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;&lt;!-- box-image --&gt;
  
          &lt;div class="box-text box-text-products text-center grid-style-2"&gt;
              &lt;div class="title-wrapper"&gt;     &lt;p class="category uppercase is-smaller no-text-overflow product-cat op-7"&gt;
              Schwarztee      &lt;/p&gt;
      &lt;p class="name product-title" style="height: 23px;"&gt;&lt;a href="https://dertee.de/shop/el-guapo/"&gt;El Guapo&lt;/a&gt;&lt;/p&gt;&lt;i id="product-subtitle-10758" class="product-subtitle subtitle-10758"&gt;Mango Vollreif&lt;/i&gt;&lt;/div&gt;&lt;div class="price-wrapper" style="height: 34px;"&gt;&lt;p class="price"&gt;&lt;span class="woocommerce-Price-amount amount"&gt;8,95&amp;nbsp;&lt;span class="woocommerce-Price-currencySymbol"&gt;€&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;div class="wgm-info woocommerce-de_price_taxrate "&gt;&lt;/div&gt;
          &lt;div class="wgm-info woocommerce_de_versandkosten"&gt;zzgl. &lt;a class="versandkosten" href="https://dertee.de/versand-und-zahlung/" target="_blank"&gt;Versand&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;div class="add-to-cart-button" style="height: 98px;"&gt;&lt;a href="?add-to-cart=10758" data-quantity="1" class="primary is-small mb-0 button product_type_simple add_to_cart_button ajax_add_to_cart is-outline" data-product_id="10758" data-product_sku="" aria-label="„El Guapo“ zu deinem Warenkorb hinzufügen" rel="nofollow"&gt;In den Warenkorb&lt;/a&gt;&lt;/div&gt;     &lt;/div&gt;&lt;!-- box-text --&gt;
      &lt;/div&gt;&lt;!-- box --&gt;
          &lt;/div&gt;&lt;!-- .col-inner --&gt;
  &lt;/div&gt;&lt;!-- col --&gt;
  
          
                      
  &lt;div class="product-small col has-hover product type-product post-10757 status-publish last instock product_cat-schwarztee has-post-thumbnail taxable shipping-taxable purchasable product-type-simple"&gt;
      &lt;div class="col-inner"&gt;
      
  &lt;div class="badge-container absolute left top z-1"&gt;
  &lt;/div&gt;
      &lt;div class="product-small box "&gt;
          &lt;div class="box-image"&gt;
              &lt;div class="image-zoom-fade"&gt;
                  &lt;a href="https://dertee.de/shop/royal-rumble/"&gt;
                      &lt;img src="https://picsum.photos/1000/1000" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="1000"&gt;             &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="image-tools is-small top right show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools is-small hide-for-small bottom left show-on-hover"&gt;
                              &lt;/div&gt;
              &lt;div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover"&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;&lt;!-- box-image --&gt;
  
          &lt;div class="box-text box-text-products text-center grid-style-2"&gt;
              &lt;div class="title-wrapper"&gt;     &lt;p class="category uppercase is-smaller no-text-overflow product-cat op-7"&gt;
              Schwarztee      &lt;/p&gt;
      &lt;p class="name product-title" style="height: 23px;"&gt;&lt;a href="https://dertee.de/shop/royal-rumble/"&gt;Royal Rumble&lt;/a&gt;&lt;/p&gt;&lt;i id="product-subtitle-10757" class="product-subtitle subtitle-10757"&gt;Granatapfel + Goji + Sanddornbeere + Himbeere + Guarana&lt;/i&gt;&lt;/div&gt;&lt;div class="price-wrapper" style="height: 34px;"&gt;&lt;p class="price"&gt;&lt;span class="woocommerce-Price-amount amount"&gt;12,95&amp;nbsp;&lt;span class="woocommerce-Price-currencySymbol"&gt;€&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;div class="wgm-info woocommerce-de_price_taxrate "&gt;&lt;/div&gt;
          &lt;div class="wgm-info woocommerce_de_versandkosten"&gt;zzgl. &lt;a class="versandkosten" href="https://dertee.de/versand-und-zahlung/" target="_blank"&gt;Versand&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;div class="add-to-cart-button" style="height: 98px;"&gt;&lt;a href="?add-to-cart=10757" data-quantity="1" class="primary is-small mb-0 button product_type_simple add_to_cart_button ajax_add_to_cart is-outline" data-product_id="10757" data-product_sku="" aria-label="„Royal Rumble“ zu deinem Warenkorb hinzufügen" rel="nofollow"&gt;In den Warenkorb&lt;/a&gt;&lt;/div&gt;     &lt;/div&gt;&lt;!-- box-text --&gt;
      &lt;/div&gt;&lt;!-- box --&gt;
          &lt;/div&gt;&lt;!-- .col-inner --&gt;
  &lt;/div&gt;&lt;!-- col --&gt;
  
          
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Kind regards</p>