My code is all contained within a header with the class 'example'. When the 'search' button is clicked, a div with the class 'search-bar' appears and its borders match those of the header. However, I want the search bar to align with the left edge of the screen. How can this 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>