I'm looking for a way to adjust the spacing of items within a navigation bar that includes tags and a search bar. I experimented with using space-between, but I'm not sure how to properly resize the search bar to make it slightly larger. Would combining flex-end help achieve this?
Current Attempt
https://i.sstatic.net/ZYndo.png
Mock-Up Preview
https://i.sstatic.net/mR2Oy.png
The box on the right should be slightly enlarged.
Code Snippet
Container
const TagsContainer = styled.div`
display: flex;
width: 100%;
margin-top: 15px;
`
export default function Tags() {
return (
<TagsContainer>
<Tag>Algorithms</Tag>
<Tag>Videos</Tag>
<Tag>Books</Tag>
<Tag>Tutorials</Tag>
<Tag>Health</Tag>
<Tag>Finance</Tag>
<Tag>Rants</Tag>
<Tag>Stream</Tag>
<Tag>Music</Tag>
<Search />
</TagsContainer>
)
}
Tag Style
const TagContainer = styled.div`
height: 100%;
max-height: 40px;
opacity: .8;
text-align: center;
`
const TagStyle = styled.span`
font-family: 'Lora';
min-width: 80px;
color: white;
padding: 10px;
border: 1px solid white;
font-size: 15px;
`
export default function Tag({ children }) {
return (
<>
<TagContainer>
<TagStyle>
{ children }
</TagStyle>
</TagContainer>
</>
)
}
Search Component
const SearchContainer = styled.div`
color: white;
border: 1px solid black;
flex-grow: 2;
min-height: 40px;
height: 100%;
`
export default function Search() {
return (
<>
<SearchContainer>
This is a search box
</SearchContainer>
</>
)
}