Fixed aspect ratio for columns

aspect-ratio-col.js

$(function(){
  $('.row[data-column-aspect-ratio]').each(function(){
    var row = $(this);
    var aspectRatio = row.attr('data-column-aspect-ratio');

    function resizeColumns(){
      row.find('> .column').each(function(){

        var column = $(this);
        var inner = column.find('> .inner');
        var columnWidth = column.width();
        var columnHeight = columnWidth / aspectRatio;
        var innerHeight = inner.height();
        var innerMarginTop = (columnHeight / 2) - (innerHeight / 2);
        
        column.css('height', columnHeight + 'px');
        inner.css('margin-top', innerMarginTop + 'px');
      });
    }

    $(window).on('resize', resizeColumns);
    resizeColumns();
  });
});

gistfile1.html

  <div class="row" data-column-aspect-ratio="1">
      <div class="column column-1">
          <div class="inner">
              <h4>Asdasdkjasdjkaskdj</h4>
              <p>asdasdasdasdsa</p>
          </div>
      </div>
      <div class="column column-2">
          <div class="inner">
              <h4>Asdasdkjasdjkaskdj</h4>
              <p>asdasdasdasdsa</p>
          </div>
      </div>
      <div class="column column-3">
          <div class="inner">
              <h4>Asdasdkjasdjkaskdj</h4>
              <p>asdasdasdasdsa</p>
          </div>
      </div>
      <div class="column column-4">
          <div class="inner">
              <h4>Asdasdkjasdjkaskdj</h4>
              <p>asdasdasdasdsa</p>
          </div>
      </div>
  </div>

gistfile2.scss

row{
  width: 100%;
}

.column{
    width: 25%;
    float: left;
    margin: 0;
    font-size: 1em;
}

.column-1, .column-3{
    background: #000;
    color: #fff;
}