console
<div class="box ez-horizontal-layout">
<dl class="item-left ez-horizontal-layout__left"></dl>
<dl class="item-right ez-horizontal-layout__right"></dl>
</div>
dl{ margin: 0; }
.box{
.item-left, .item-right{ height: 100px; }
.item-left{ background: gray; }
.item-right{ background: #FFF; }
}
@mixin ez-horizontal-layout($--item-left-width: 100px) {
.ez-horizontal-layout{
&{
position: relative;
}
&__left {
width: $--item-left-width;
}
&__right {
position: absolute;
top: 0;right: 0;bottom: 0;
left: $--item-left-width
}
}
}
@include ez-horizontal-layout(100px);