Set height to be equal width minus some value
<pre><code>&lt;div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
            &lt;div class="cta-item cta-1"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="hover"&gt;&lt;p&gt;Serving food fine to fast. Come &lt;span class="arrow"&gt;Hungry&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
                    &lt;p class="cta-title"&gt;Visit&lt;/p&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;div class="cta-item cta-2"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="hover"&gt;&lt;p&gt;Serving food fine to fast. Come &lt;span class="arrow"&gt;Hungry&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
                    &lt;p class="cta-title"&gt;Shop&lt;/p&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;div class="cta-item cta-3"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="hover"&gt;&lt;p&gt;Serving food fine to fast. Come &lt;span class="arrow"&gt;Hungry&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
                    &lt;p class="cta-title"&gt;Eat&lt;/p&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
$(document).ready(cta);
$(window).resize(cta);

function cta() {
    var ctaWidth = $('.cta-item').width();
    var newHeight = ctaWidth - 40;

    $('.cta-item').css( 'height', newHeight );
}
&lt;/script&gt;
</code></pre>

<p>My question is how to do height = width - 40px for particular element by pure css?  </p>

<p>Thanks.</p>