React-select not following flexbox alignment - css

Question

I am trying to make my navbar and I want to display both react-selects in one single row so I did this
Everything was working with vanilla select but adding the react-select breaks my styling
Navbar.js
import React, { useState } from "react";
import classes from "./Navbar.module.css";
import { useDispatch } from "react-redux";
import { selectAction } from "../../../store/actions/actions";
import Logo from "../../../images/BB_S5_excl_namelab_c.jpg";
import Select from 'react-select';
const CharacterOptions = [
{ value: '-----------', label: '-----------' },
{ value: 'Get character by id', label: 'Get character by id' },
{ value: 'Get character by category', label: 'Get character by category' },
{ value: 'Get random character', label: 'Get random character' },
{ value: 'Search character by name', label: 'Search character by name' },
];
const QuoteOptions = [
{ value: '-----------', label: '-----------' },
{ value: 'Get quote by id', label: 'Get quote by id' },
{ value: 'Get quotes by series', label: 'Get quotes by series' },
{ value: 'Get a random quote', label: 'Get a random quote' },
{ value: 'Get quote by author', label: 'Get quote by author' },
{ value: 'Get a random quote by author', label: 'Get a random quote by author' },
];
const Navbar = (props) => {
const dispatch = useDispatch();
const [selectedCharacter, setSelectedCharacter] = useState(false);
const [selectedQuote, setSelectedQuote] = useState(false);
const dropDownCharacterSelected = (value) => {
if (value !== "-----------") {
setSelectedCharacter(true);
dispatch(selectAction(value.value));
} else {
dropDownCharacterDeSelected(value.value);
dispatch(selectAction(null));
}
};
const dropDownCharacterDeSelected = () => {
setSelectedCharacter(false);
};
const dropDownQuoteSelected = (value) => {
if (value !== "-----------") {
setSelectedQuote(true);
dispatch(selectAction(value.value));
} else {
dropDownQuoteDeSelected(value.value);
dispatch(selectAction(null));
}
};
const dropDownQuoteDeSelected = () => {
setSelectedQuote(false);
};
return (
<nav className={classes.Navbar}>
<img src={Logo} alt="Logo" width="100" height="60" />
<div>
<ul>
<li>
<label>Characters</label>
<Select
disabled={selectedQuote}
onChange={dropDownCharacterSelected}
options={CharacterOptions}
/>
</li>
<li>
<label>Quotes</label>
<Select
disabled={selectedCharacter}
onChange={dropDownQuoteSelected}
options={QuoteOptions}
/>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Navbar.module.css
.Navbar{
display: flex;
height: 52px;
box-sizing: content-box;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
padding: 10px;
justify-content: center;
align-items: center;
}
.Navbar div ul {
display: flex;
}
.Navbar ul li {
display: flex;
list-style: none;
}
.Navbar label {
width: 100px;
border-radius:8px;
margin:10px;
background-color: lightgrey;
color:darkgreen;
font-weight: bold;
font-size: 20px;
padding: 10px;
}
Edit
Cant increase width of react-select
Here is my Codesandbox URL for your reference
https://codesandbox.io/s/youthful-gauss-r1d8o

Answer 1

You can achieve that by using flexbox to align your items in a row:
.Navbar div ul {
width: 100%;
display: flex; /* use flexbox to align the inputs on same row */
}
.Navbar ul li {
display: flex; /* use flexbox to align the labels on same row than the inputs */
align-items: center; /* align the items vertically */
list-style: none;
}
.Navbar ul li input {
min-width: 100px; /* specify react-select component's width */
}

Answer 2

Adding display: flex, will show both component in the same row:
.Navbar div ul {
...
display: flex;
...
}