JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>all containers have same font size</li>
<li>container 1 and container 2 have line-height set</li>
<li>calculations are made with javascript using jQuery</li>
</ul>

<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
<div class="container3">Container 3</div>

CSS

div {
  font-size: 20px;
  background-color: orange;
  margin-bottom: 16px;
}

.container1 {
  font-family: sans-serif;
  line-height: 20px;
}

.container2 {
  font-family: "Times New Roman", Times, serif;
  line-height: 20px;
}

.container3 {
  font-family: "Times New Roman", Times, serif;
}

ul {
  background-color: #ddd;
  padding: 16px 24px;
  font-family: sans-serif;
  margin: 0 0 24px;
}

JavaScript

$('div').each(function() {
	$(this).append(' - height is ' + $(this).height() + 'px');
});