如何在div内联中对齐元素？

Question

您如何在＃main-informations div内的那些段落与＃paper-scissors-rock div内的div对齐？

		<div id="main-informations">
			<p>Score: <span id="score"></span></p>
			<p>You chose: <span id="user_choice"></span></p>
			<p>The machine chose: <span id="machine_choice"></span></p>
			<p>Result: <span id="result"></span></p>
			<p>Tries left: <span id="tries_left">3</span></p>
			<p>End result: <span id="end_result"></span></p>
		</div>
		<div id="paper-scissors-rock">
			<div>
				<img width="30%" height="200px" src="images/paper.png"/><br>
				<button id="paper" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Paper</button>
			</div>
			<div>
				<img width="30%" height="200px" src="images/scissors.png"/><br>
				<button id="scissors" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Scissors</button>
			</div>
			<div>
				<img width="30%" height="200px" src="images/rock.png"/><br>
				<button id="rock" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Rock</button>
			</div>
		</div>
		<div>
			<button id="restart" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Restart</button>				
		</div>

Answer 1

检查。

#main-informations {
  display: flex;
 }
#paper-scissors-rock {
  display: flex;
 }