Utilizing display: contents
By using display: contents, we have the ability to substitute <ul> with its child elements in relation to CSS layout. This approach allows us to effectively arrange the input field and list-items together.
Please note: Some browsers currently experience accessibility concerns when employing display: contents. If this issue did not exist, I would recommend utilizing display: contents.
Alternative to using a list
If we decide to disregard the requirement of organizing the tags within a list structure, we can opt to place them as siblings alongside the input field. This flat hierarchy facilitates easier styling, for instance, leveraging CSS Flexbox:
.box {display: flex}
.box input {flex-grow: 1}
/*Enable resizing; observe the behavior!*/
.box {
overflow: hidden;
resize: both;
}
/*Excluded for formatting purposes*/
.box {border: 1px solid black}
.box>ul {
margin: 0;
padding: 0;
list-style-type: none; /*Eliminate list bullets*/
}
.box>ul>li {background-color: #ddd}
<div class="box">
<span>added tag 1</span>
<span>added tag 2</span>
<span>added tag 3</span>
<span>added tag 4</span>
<input placeholder="input new tag">
</div>
Embracing inline elements
To achieve a seamless flow between tags and the input field akin to inline-level elements, it is advisable to employ display: inline (or similar):
.box > ul {display: inline}
.box > ul > li {display: inline-block}
/*Enable resizing; observe the behavior!*/
.box {
overflow: hidden;
resize: both;
}
/*Excluded for formatting purposes*/
.box {border: 1px solid black}
.box>ul {
margin: 0;
padding: 0;
list-style-type: none; /*Remove list-markers*/
}
.box>ul>li {background-color: #ddd}
<div class="box">
<ul>
<li>added tag 1</li>
<li>added tag 2</li>
<li>added tag 3</li>
<li>added tag 4</li>
</ul>
<input placeholder="input new tag">
</div>
Note: Consider using inline-block or a similar approach for the tags if you require a different formatting context than outlined in inline formatting specifications, which may not fully accommodate certain vertical styles (e.g., margin, padding, border).
The reason why applying display: inline-flex on <ul> does not position the input field in the last partially filled line is:
The inline-flex value treats <ul> as one (flex) container within the flow. Another element cannot be inserted into that container's sequence.
In contrast, the inline value converts <ul> into an inline-level element, allowing it to adapt to its surrounding flow by forming line boxes. Line boxes might occupy only part of a line, enabling subsequent elements to share the same line.