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

JavaScript
1

Here is my HTML

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

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

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

  &lt;/a&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

    &lt;script&gt;
	
	$(document).ready(function() {

		var LogosHeight = $(".LogoImg").height;
		}
		
		$(."text").css("height","var LogosHeight");
		
		
		
		
    });
	
	&lt;/script&gt;
2

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">
<head>
<meta charset="utf-8">
<style>

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

</style>
</head>
<body>

<a class="group1 TextWrap LogoImg" href="#">
	<span class="text">
		View Larger Image
	</span>
	<img src="http://placehold.it/500X400">
</a>

</body>
</html>

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]);