How to get rid of padding when search bar is open - css

Question

All my code is placed in a header with class 'example'. When 'search' button is pressed, div with class 'search-bar' appears and have its borders identical to those of header. However, I would like to see search-bar bump into the left edge of the screen. How can it be achieved?
const searchBar =
document.querySelector('#search-bar');
const openBtn = document.querySelector('#open-btn');
const closeBtn = document.querySelector('#close-btn');
const brand = document.querySelector('#brand');
openBtn.addEventListener('click', (e) => toggleSlider());
closeBtn.addEventListener('click', (e) => toggleSlider());
function toggleSlider() {
searchBar.classList.toggle('open');
brand.classList.toggle('open');
}
.example {
padding: 0 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
z-index: 100;
transition: all 1s ease;
}
.brand.open {
color: #fff;
}
.slide-area {
width: 100%;
padding: 10px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
height: 50px;
overflow: hidden;
}
.search-bar {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: purple;
position: absolute;
padding: 10px;
right: 0;
top: 0;
left: 0;
bottom: 0;
transform: translateX(100%);
transition: all 1s ease;
}
.search-bar.open {
transform: translateX(0);
}
<header class="example">
<div class="slide-area">
<div id="brand" class="brand">Menu Stuff
</div>
<button id="open-btn">Search
</button>
<div id="search-bar" class="search-bar">
<button id="close-btn">X</button>
</div>
</div>
<div class="btns">Log in</div>
</header>
Link to the working example in CodePen

Answer 1

Just change overflow: hidden from .slide-area to .example
const searchBar =
document.querySelector('#search-bar');
const openBtn = document.querySelector('#open-btn');
const closeBtn = document.querySelector('#close-btn');
const brand = document.querySelector('#brand');
openBtn.addEventListener('click', (e) => toggleSlider());
closeBtn.addEventListener('click', (e) => toggleSlider());
function toggleSlider() {
searchBar.classList.toggle('open');
brand.classList.toggle('open');
}
body {
margin: 0px;
}
.example {
padding: 0 50px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.brand {
z-index: 100;
transition: all 1s ease;
}
.brand.open {
color: #fff;
}
.slide-area {
width: 100%;
padding: 10px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
}
.search-bar {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: purple;
position: absolute;
padding: 10px;
right: 0;
top: 0;
left: 0;
bottom: 0;
transform: translateX(100%);
transition: all 1s ease;
}
.search-bar.open {
transform: translateX(0);
}
<header class="example">
<div class="slide-area">
<div id="brand" class="brand">Menu Stuff
</div>
<button id="open-btn">Search
</button>
<div id="search-bar" class="search-bar">
<button id="close-btn">X</button>
</div>
</div>
<div class="btns">Log in</div>
</header>
Codepen link