How to vertically align deeply nested labels, which are randomly interleved? - css

Question

I try to align two kinds of columns, which are interleaved by random content, but without specifying the width.
label::after {
content: ':';
margin-right: 1ch;
}
label.s {
background-color: #AAF;
}
label.l {
background-color: #AFA;
}
<article>
<div>lore ipsum</div>
<form>
<label class="s">M</label>short
</form>
<div>lore ipsum</div>
<form>
<label class="s">MMM</label>short
</form>
<div>lore ipsum</div>
<form>
<label class="l">MMMMMMMMMM M</label>long
</form>
<div>lore ipsum</div>
<form>
<label class="s">MMMMM</label>short
</form>
<div>lore ipsum</div>
<form>
<label class="l">MMMMMMMMMM MMM</label>long
</form>
<div>lore ipsum</div>
<form>
<label class="l">MMMMMMMMMM MMMMM</label>long
</form>
<div>lore ipsum</div>
</article>
My aim is to vertically align the "short" strings in one column and the "long" strings in another column.
Is this possible just with CSS?