Grid row: same height for cells

Hey emilconsor,
Thank you for your patience and for the link to your test site, Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($) {
  $(function() {
  	var tall = $('.custom-grid.career-grid').height();
  	var half = $('.career-flex.left').height() / 2;
      $('.career-flex.right .flex_column_div').css('height',half);
      $('.career-flex.left .avia_image').css('height',tall);
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

and then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (min-width: 1024px) and (max-width: 1440px) { 
.career-flex.right p {
	font-size: 0.9em;
	line-height: 1.3em;
}
#top .career-flex.right .av-special-heading {
	margin: 0;
	padding-bottom: 10px;
	font-size: 20px;
}
#top .career-flex.right .flex_column_div:nth-child(2) {
	padding: 10px;
}
}
@media only screen and (min-width: 1441px) and (max-width: 1824px) {
	.career-flex.right p {
	font-size: 0.9em;
	line-height: 1.3em;
}
}
.custom-grid.career-grid .flex_cell,
.custom-grid.career-grid .flex_column_div {
	overflow: hidden;
}
.career-flex.left .avia_image,
.career-flex.right .avia_image,
.career-flex.right .avia-image-container-inner {
	width: 100%;
}

A screenshot of the expected results are below.
I tried a few different ways to work this and feel that as the page is the best solution is to use this script and css, because it also works for very large screens 2560px, but you will note that the css only goes down to 1024px, that is because you have changed the display to flex and for mobile and tablet the layout doesn’t adjust, so you will need to write some more css for moble or switch back to display block, I’m not sure what your intentions are for that as your lower elements are also using flex.
I see with your Grid Row element that you have placed an image element inside a column element inside the grid row cell and changed the display to flex, for the left side 2/3 cell you could just use the image as a background and it would fill the cell as you wish. For the right side you would not need to place the top image in a column, but only use a text element inside a column for the bottom text section. I created an example for you linked below with this added css:

#av-layout-grid-1 {
padding: 40px;
}
.flex_cell.av_one_third {
padding: 0 30px;
}
.avia-image-container.avia-align-center {
margin-bottom: 30px;
}

This is just a suggestion.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike