Is there a way to make the highlight span sit just after the to without affecting the width of the parent, and without using absolute positioning? I would like the span to be aligned with the example "to" and overflow outside of the parent container.
Thank you for
your interest
to Sign up to today's deals
.outer {
width: 100%;
height: 100%;
}
.parent {
width: 260px;
border: 1px solid #ccc;
overflow: visible;
font-size: 45px;
line-height: 60px;
}
.overflowing-span {
white-space: nowrap;
display: inline-block;
}
.highlight {
padding: 8px;
background-color: gray;
border-radius: 6px;
font-size: 35px;
}<div class="outer">
<div class="parent">
<span>Thank you for your interest to </span>
<span class="overflowing-span">
<span class='highlight'>Sign up to today's deals</span>
</span>
</div>
</div>