The design I'm trying to codeI attempted to code this design of form input, but I encountered a problem when I used display: flex. The width of the input shortens instead of expanding as I expected.
The result of my codeHere are the results of what I did, the width of my form input is already set to 100%. I have it in display: flex because I need the dropdown, input, and search button to stick together. Anyway, here's my code. Please let me know if anything is incorrect.
HTML:
`<div class="search-button"><div class="div-1-s1"><span>All</span><img src="t-icon.svg" alt="a svg icon"/></div><div class="div-2-s1"><form action="#"><input type="text" id="label" placeholder="Search a location"></form> <img src="f2-icon.svg" alt="a svg icon" id="sent-icon"/></div></div>`CSS:
`.search-button { display: flex; justify-content: left; margin-left: .4em; margin-bottom: 1em; }.div-1-s1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; background-color: white; border-radius: 5px 0 0 5px; border: 1px solid white; padding: .8em .7em .8em .75em; margin-left: 1em; display: flex; justify-content: center; align-items: center; }.div-1-s1 img { padding-left: 0.6rem; }.div-2-s1 { display: flex; }.div-2-s1 input { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; font-size: 0.875rem; padding: .8em 0 .8em .9em; border: 1px solid white; line-height: 1.25rem; width: 100%; max-width: 100%; }#sent-icon { padding: .7em .5em .7em .5em; margin-right: 1em; border-radius: 0 5px 5px 0; border: 1px solid white; background-color: white; }`