Dynamically change width to adjust div inside another div with CSS - html

Question

I am trying to create a custom div with input text and two buttons inside it as shown below.
But when i resize the screen it becomes like this
Is there a way to avoid the two buttons to come down ? Instead it should remain inside the original div.
Here's the code i tried:
.searchBar {
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
display: inline-block;
border-radius:4px ;
background: #FFFFFF;
width: 70%;height: 32px;
position: relative;
left: 60px;
overflow: inherit;
}
.search_field input {
width: 89%;
padding: 0;
border-top-left-radius: 4px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border:1px inset red;
}
.search_field input:focus {
outline-color: transparent;
outline-style: none;
}
.search_field button {
border: none;
background: none;
}
<div id="searchBar" class="searchBar">
<div class="search_field">
<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
<button id="btn1" hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>
<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
</div>
</div>
Any help is appreciated. Thanks

Answer 1

You can use calc to calculate the width of your input element relative to your buttons:
width: calc(100% - 100px);
Just make sure the width of your buttons is taken of the 100%. In SASS it could look like this:
$buttons: 50px;
width: calc(100% - #{$buttons * 2});
Below is a simplified implementation. I still have the % values as a fallback for older browsers - but that's more a habit than necessity as every major browser supports calc, even IE9 and onward.
input, button {
float: left;
height: 50px;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
}
input {
width: 70%;
width: calc(100% - 100px);
padding: 10px;
}
button {
/* Note that this width is equal to 100%
/* minus the percentage width of the input
/* divided by the amount of buttons. */
width: 15%;
width: 50px;
line-height: 50px;
}
/* This rule is just to make sure your images don't decide the buttons width */
button img {
max-width: 100%;
display: inline-block;
}
<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>

Answer 2

Please try this instead of your styles:
.searchBar{
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
border-radius:4px ;
background: #FFFFFF;
position: relative;
padding-right: 100px; /* You can change as button width */
}
.search_field input {
width: 100%;
padding: 0;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px #FF0000;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.search_field button {
border: none;
background: none;
position: absolute;
top: 0;
}
.search_field button#btn1 {
right: 50px; /* Change as your requirement */
}
.search_field button#btn2 {
right: 0; /* Change as your requirement */
}