Getting an element to vertically align with the rest of its line - html

Question

In the example below I'm trying to add some inline input range elements that align with the line but also align with the right edge of the outer div. In the actual site the html is code that's been run through prettify so it's nothing but <span> elements inside a <pre> element so whitespace and in particular, linefeeds, is relevant.
In any case I insert these <input type="range"> elements wrapped by 2 divs and I'm trying to get them to align to the content in the same line but on the right of the outer container.
I haven't actually found a solution. Originally I had a normal font size and if I added some extranous content inside the .holders things would appear to align but in reality once I increased the font size it showed they were not actually aligning.
Is there some way to fix this?
I get that normally you might do something like this with table (separate column for the sliders) or a flexbox but that would require parsing all the code to find the linebreaks and then generating a bunch of new html.
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<h1>test</h1>
<div class="outer">
<div>
<span>foo: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
<div>
<span>bar: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
</div>
Note: the code above shows the issue but the real code is whitespace sensative pre and spans which are hard to read. Here it is.
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<pre class="outer"><span>foo: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>
As I mentioned above the <pre> and <span> are generated, after which I insert the range inputs.
Yet another wrikle is that on the actual site the <pre> section gets scrollbars if a line is too long (just like S.O. code area) but in that case I still want the input areas at the right of the visible area (if you haven't scrolled).
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
overflow: auto;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<pre class="outer"><span>longlongline: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>
A screenshot of the final result will probably help.
Normally the sliders are inline (no CSS apart from display: inline-block) but if the window is not wide enough the sliders would get pushed off. So, instead I make them transparent and set them to use absolute positioning so they don't get pushed off. This way you can still both read the code and interact with the sliders.
They appear to align ATM but if you go to the page and make sure your window is less than 450px wide and set the prettyprint.pre font size to say 15pt then you'll see the alignment is just luck and that they aren't actully being "aligned" it's just certain sizes of various things happen to make them appear aligned.
I fully understand they might not actually be a solution except to parse the code and separate each line into its own container but if possible I'd like to use the correct CSS (assuming it exists) to make them align.

Answer 1

.outer {
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
vertical-align: middle;
}
.holder>div {
display: inline-block;
}
.holder input {
display: inline-block;
}

Answer 2

you can try to add "vertical-align:middle"
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.outer>div{
position: relative;
display: inline-block;
}
span{
vertical-align:middle;
}
.holder {
vertical-align:middle;
display: inline-block;
}
.holder>div {
position: relative;
display: inline-block;
right: 0;
}
.holder input {
position: relative;
display: inline-block;
}
<h1>test</h1>
<div class="outer">
<div>
<span>
foo:
</span>
<div class="holder">
<div>
<input type="range" />
</div>
</div>
</div>
<div>
<span>
bar:
</span>
<div class="holder">
<div>
<input type="range" />
</div>
</div>
</div>
</div>