CSS показать четыре раскрывающихся меню рядом. Ссылка по jsfiddle доступна

Question

Я застрял при создании четырех выпадающих меню рядом с заголовком на пару из них. Результат, который я пытаюсь получить, должен выглядеть следующим образом:

               Header                                                Header2
    [menu1]               [menu2]   [submit button]        [menu3]            [menu4]    [submit button]

Но для меня сейчас это выглядит так:

Header [menu1] [menu2] [sub button]


Header1 [menu1] [menu2] [sub button]

Это то, что я сделал до сих пор, вы можете видеть это в JSFiddle ссылка взорвалась:

https://jsfiddle.net/snrk425x/

Answer 1

Просто измените свою информацию css класс на flex. Вы можете прочитать об этом здесь: CSS Трюки , W3 .

.info {
    display: flex; 
}

select {
    display: inline;
    cursor: pointer;
}

.box {
    width: 100%;
    display: inline-block;
    margin: 20px 0px 20px 20px;
}

form {
    display: inline-block;
}

<div class="info">

		<form action="server.php" method="post" class="box">
        <select name="from"></select>
        <select name="to"></select>


		<button type="submit" name="valuta" onsubmit="update.style.display='none'">show graph </button>

		</form>
		
		<form action="server1.php" method="post" class="box">

        <select  name="from"></select>

        <select name="to"></select>


		<button id="cryp1" type="submit" name="cryp" onsubmit="update.style.display='none'"> show graph </button>

		</form>

		</div>