CSS Ignore sibling div

Question

I am trying to achieve something that looks fairly simple, but I am not sure there is a way to get it done with css.

I have a list of tags that are displayed in a row. In the fiddle below, I fixed the size of the tags-wrapper to simulate the row wrapping.

Now what I would like to do is add the input straight after the last tag (on the same row ). I am not sure how that is possible, as this would mean the input would be inside of the tags-wrapper div ( which, please correct me if I am wrong, but I think is only achievable with an absolute positioned div).

Effectively what I would like to do is to ignore the tags-wrapper div and just place my input straight after the last tag div, but I can't change the html as I am developing with angular components and the input and the tags-wrapper are in different components.

.tags-wrapper{
  width: 210px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tag{
  padding: 2px 3px;
  margin: 1px 2px;
  border: 1px solid black;
}

input{
  width: 60px;
}

<div class='tags-wrapper'>
	<div class='tag'>Basketball</div>
	<div class='tag'>Football</div>
	<div class='tag'>Baseball</div>
</div>
<input placeholder='Search'>

Answer 1

You can achieve this with floating the .tag elements as well as the input element.

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow

(— https://developer.mozilla.org/en-US/docs/Web/CSS/float)

.tags-wrapper {
  width: 210px;
}

.tag {
  padding: 2px 3px;
  margin: 1px 2px;
  border: 1px solid black;
  float: left;
}

input {
  width: 60px;
  height: 18px;
  margin: 1px;
  float: left;
}

<div class='tags-wrapper'>
  <div class='tag'>Basketball</div>
  <div class='tag'>Football</div>
  <div class='tag'>Baseball</div>
</div>
<input placeholder='Search'>