Set width of a span based on width of another element with pure css
It's a little bit gimmick but it can be done with pure CSS
#setter {
display: inline-block;
}
.container {
max-width: 200px;
position: relative;
display: inline-block;
padding-bottom: 1.125em;
}
.wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 0;
right: 0;
}
<div class="container">
<div id="setter">
<span>some variable content</span>
</div>
<div class="wrap">
<span>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</div>
</div>
I don't really think you can accomplish this with CSS. Try a jquery solution like this:
var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");