What would be the best way to vertically-align my list items (Cheap, Low Price, an image etc) at right DIV based on the height of the right DIV (height of the right DIV is driven by the size of the big text on the left DIV) without giving a fixed height to the DIV?
Here is the code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>div middle</title>
<style>
div{
width:300px;
background: red;
}
.block-left, .block-right {
display:table-cell;
vertical-align:middle;
padding:30px 0;
height:100%;
}
.wrapper {
display:table;
}
.bigtext{
font-size: 30px;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”block-left bigtext”>
Eyeglasses<br>Sunglasses<br>Glasses
</div>
<div class=”block-right”>
<ul class=”bullets1-alt”>
<li><i class=”fa fa-check”></i> Cheap</li>
<li><i class=”fa fa-check”></i> Low Price</li>
</ul>
</div>
</div>
<hr>
<div class=”wrapper”>
<div class=”block-left bigtext”>
Eyeglasses<br>Sunglasses<br>Glasses
</div>
<div class=”block-right”>
<img src=”logo.jpg” alt=”glasses”>
</div>
</div>
</body>
</html>