I have this example:

link

CODE HTML:

 <div class="header">
  <div class="panel-wrapper">
    <input type="text"/>
  </div>
  <div class="header-content">
      <ul class="top-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
    <span>Here you need to insert the input without changing the HTML structure</span>
    <i class="icon-test"></i>
  </div>
</div>

CODE CSS:

.icon-test {
  width: 20px;
  height: 10px;
  background: red;
  display: block;
}

.header-content {
  display:flex;
  align-items: center;
  gap: 20px;
}

.top-menu {
  display: flex;
  list-style-type: none;
  font-style: initial;
  gap: 20px;
  margin: 0;
  padding: 0;
}

What I want to do is move the <input> element next to the menu without changing the html structure.

I tried to do it with display:flex but I didn't succeed.

Is this possible or is it necessary to change the structure?

Thanks!

CodePudding user response：

add display: inline-block to .panel-wrapper and .header-content

CodePudding user response：

add float: right to .panel-wrapper

.icon-test {
  width: 20px;
  height: 10px;
  background: red;
  display: block;
}
.panel-wrapper{
  display: inline-block;
  float: right
}
.header-content {
  display:inline-block;
  align-items: center;
  gap: 20px;
}

.top-menu {
  display: flex;
  list-style-type: none;
  font-style: initial;
  gap: 20px;
  margin: 0;
  padding: 0;
}

 <div class="header">
  <div class="panel-wrapper">
    <input type="text"/>
  </div>
  <div class="header-content">
      <ul class="top-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
    <span>Here you need to insert the input without changing the HTML structure</span>
    <i class="icon-test"></i>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>