Can anyone help me figure out why the text is being cut vertically in my <div>? I thought it would adjust its height automatically. Thanks for any input.
<div class="wrapper">
<div class="block-left bigtext">left</div>
<div class="block-right">right</div>
</div>
.bigtext {
color: #333;
font-weight: 600;
font-size: 53px;
line-height: 12px;
text-align: right;
}
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
overflow: hidden;
background:red;
}
.block-left {
float: left;
box-sizing: border-box;
padding-right: 20px;
width: 50%;
}
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
}