Make img and input line up properly and float to right in html

Question

I want a relatively simple navbar which has a search icon to it's right. Clicking on the icon exposes a hidden search input to its left.

I tried following the advice here after getting frustrated with some other solutions such as playing with "float" or "white-space".

If you look at the after-click picture you'll see that the aspect ratio of the image has changed.

What is the right way to do this?

Code:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

<div id="topnav">
  <ul>
    <li><a href="#home">Top Questions</a></li>
    <li style="float:right;">
      <div style="display:flex;flex-direction:row">
        <form><input type="search" id="mySearch" placeholder="Search..." style="display:none;width:200px"></form>
        <img src="search-icon-24.png" alt="" id="searchicon" />
      </div>
    </li>
  </ul>
</div>

Answer 1

Use flexbox for the layout. If you want to have same width, use flex: 1

Structure

HTML

<div class="row">
  <div>50%</div>
  <div>50%
    <input ...>
    <button><img ...></button>
  </div>
</div>

CSS

.row {
  display: flex;
}

.row > div {
  flex: 1;
}

Make the second div inside .row also display: flex and justify-content: flex-end to set the content on the right side.

.row > div:nth-child(2) {
  display: flex;
  justify-content: flex-end;
}

JavaScript

Add an event listener to the click element. Every time one clicks the element, the target element toggles. Toggle with el.classList.toggle(cssClass)

---

Example without effect

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "hide");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="hide expand-200" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>

Example with effect

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "expand-200");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="width-0" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>

Answer 2

Does this code help?

function TQ() {
var a = document.getElementById("test");
a.style.display = "block"
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
    }
    
    li {
    	float: left;
    }
    #test {
    display: none
    }

<!DOCTYPE html>
<html>

<div id="topnav">
	<ul>
    <li><a href="#home">Top Questions</a></li>
	<li style="float:right"><a href="javascript:void(0);" onclick="TQ()">&#128270;</a></li>
		
		<li style="float:right;">
			<div id="test">					
				    <form><input type="search" id="mySearch" placeholder="Search..." style="width:200px"></form>
                    
				
			</div>
		</li>
	</ul>
    

    
    </div>



</html>