Get height of one element and then set the css height of another

Here is my HTML

<a class=“group1 TextWrap LogoImg” href=“Images/UtahLibertyLawLogo.png”>

&lt;span class="text"&gt;
    View Larger Image

  &lt;img src="Images/UtahLibertyLawLogo.png" /&gt;


I’d like to get the height of the LogoImg and then set the height of the text class to that.

This is what I’ve tried, but can’t get it to work

	$(document).ready(function() {

		var LogosHeight = $(".LogoImg").height;
		$(."text").css("height","var LogosHeight");

You don’t need JS for this, as you could use a combination of display: table and display: table-cell:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

a {display: table;}
a span, a img {display: table-cell; vertical-align: middle;}
span {background: #e7e7e7;}


<a class="group1 TextWrap LogoImg" href="#">
	<span class="text">
		View Larger Image
	<img src="">


I don’t do jQuery, but fwiw, if you must use it the first thing I’d suggest is to try changing this

$(."text").css("height",[COLOR="#FF0000"]"var LogosHeight"[/COLOR]);

to this

$(."text").css("height", [COLOR="#0000FF"]LogosHeight[/COLOR]);