I'm currently working on a React page where I have an input field and a button. My goal is to align the bottom edge of the button with the bottom line of the input. Here's the code snippet I have:
`<form className='button-container'>
<input
variant="outlined"
className="bankTransSearch"
/>
<button variant="outlined" className="bankTransSearchButton">Search</button>
</form>`
`.button-container {
display: flex;
flex-direction: row;
}
.bankTransSearch {
width: 1%;
height: 10px;
}
` .bankTransSearchButton {
background-color: #3f51b5 !important;
color: white !important;
width: 40%;
`
}`
Currently, the button appears larger than expected and its bottom edge is not aligned with the input. Can someone please assist me in fixing this issue? Thank you!
I've tried modifying the search bar and form styles, but haven't had much success.