Multiple dropdown menus in one row/line-CodePudding

I have 2 dropdowns in a form but want them to be next to each other. I tried inline-block but that only made the labels go next to the dropdowns...

        <div class = "searchbar">
            <form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
                <div class = "dropdowns" id = "currencyDropdown1">
                    <div >
                        <label for = "currencyFrom">From:</label>
                    </div>
                    <div class = "dropdown">
                        <select id = "currencyFrom" name = "currencyFrom">
                            <option id = "euro" name = "euro">Euro</option>
                            <option id = "peso" name = "peso">Peso</option>
                            <option id = "dollar" name = "dollar">Dollar</option>
                        </select>
                    </div>
                </div>
                
                <div class = "dropdowns" id = "currencyDropdown2">
                    <div class = "labels">
                        <label for = "currencyTo">To:</label>
                    </div>
                    <div class = "dropdown">
                        <select id = "currencyTo" name = "currencyTo">
                            <option id = "euro" name = "euro">Euro</option>
                            <option id = "peso" name = "peso">Peso</option>
                            <option id = "dollar" name = "dollar">Dollar</option>
                        </select>
                    </div>
                </div>
                <div class = "dropdowns" id = "currencyAmount">
                    <div class = "labels">
                        <label for="amount">Amount</label>
                    </div>
                    <input type="number" name="amount">
                </div>
            </form>
        </div>

CodePudding user response：

Use flex for this. Also, note amount outside the container

#container{
display:flex;
justify-content:space-evenly;
}

#currencyAmount{
text-align:center;}

<div class = "searchbar">
            <form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
            <div id='container'>
                <div class = "dropdowns" id = "currencyDropdown1">
                    <div >
                        <label for = "currencyFrom">From:</label>
                    </div>
                    <div class = "dropdown">
                        <select id = "currencyFrom" name = "currencyFrom">
                            <option id = "euro" name = "euro">Euro</option>
                            <option id = "peso" name = "peso">Peso</option>
                            <option id = "dollar" name = "dollar">Dollar</option>
                        </select>
                    </div>
                </div>
                
                <div class = "dropdowns" id = "currencyDropdown2">
                    <div class = "labels">
                        <label for = "currencyTo">To:</label>
                    </div>
                    <div class = "dropdown">
                        <select id = "currencyTo" name = "currencyTo">
                            <option id = "euro" name = "euro">Euro</option>
                            <option id = "peso" name = "peso">Peso</option>
                            <option id = "dollar" name = "dollar">Dollar</option>
                        </select>
                    </div>
                </div>
                </div>
                <div class = "dropdowns" id = "currencyAmount">
                    <div class = "labels">
                        <label for="amount">Amount</label>
                    </div>
                    <input type="number" name="amount">
                </div>
            </form>
        </div>

CodePudding user response：

Here's how to do it with inline-block

.dropdowns{display:inline-block}

            <div class = "searchbar">
                <form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
                    <div class = "dropdowns" id = "currencyDropdown1">
                        <div >
                            <label for = "currencyFrom">From:</label>
                        </div>
                        <div class = "dropdown">
                            <select id = "currencyFrom" name = "currencyFrom">
                                <option id = "euro" name = "euro">Euro</option>
                                <option id = "peso" name = "peso">Peso</option>
                                <option id = "dollar" name = "dollar">Dollar</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class = "dropdowns" id = "currencyDropdown2">
                        <div class = "labels">
                            <label for = "currencyTo">To:</label>
                        </div>
                        <div class = "dropdown">
                            <select id = "currencyTo" name = "currencyTo">
                                <option id = "euro" name = "euro">Euro</option>
                                <option id = "peso" name = "peso">Peso</option>
                                <option id = "dollar" name = "dollar">Dollar</option>
                            </select>
                        </div>
                    </div>
                    <div class = "dropdowns2" id = "currencyAmount">
                        <div class = "labels">
                            <label for="amount">Amount</label>
                        </div>
                        <input type="number" name="amount">
                    </div>
                </form>
            </div>