Cara membuat sejajar Div ID

Selamat sore semuanya, Ingin bertanya terkait dengan HTML CSS, Bagaimana mengatasi id box2 yang tidak mau sejajar dengan id box1 meskipun sama-sama sudah diberikan display inline Block? Berikut saya lampirkan codenya:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Belajar HTML dan CSS</title> </head> <style> #box1{ background-color: aqua; width:200px; height:230px;

	border-width: 6px;
	border-style:solid;
	border-color: darkred;	
	padding:20px;
	margin:10px 0px;
	overflow-y:scroll;
	overflow-x:hidden;

	display:inline-block;
}

#box2{
	background-color:greenyellow;
	width:30%;
	height:200px;

	border:1px solid red;

	margin:10px 0px;
	padding: 20px 100px 10px 50px;

	display:inline-block;
}

</style>

<body> <div id="box1"> <h1>Kelas Koding</h1> <span>Ini adalah Paragraf</span>

	&lt;p id=&quot;firstP&quot;&gt;Belajar Coding sekarang, untuk masa depan&lt;/p&gt;
	&lt;span&gt;Ini adalah tag P&lt;/span&gt;

	&lt;p&gt;lorem ipsum &lt;span&gt;dolor&lt;/span&gt; sit amet consectetur adipiscing elit, sed do eiusmod tempor&lt;/p&gt;
&lt;/div&gt;

&lt;div id=&quot;box2&quot;&gt;
	&lt;div&gt;
		&lt;a href=&quot;/&quot;&gt;Halaman blog&lt;/a&gt;
		&lt;span&gt;Ini adalah tag A&lt;/span&gt;
	&lt;/div&gt;

	&lt;div&gt;
		&lt;img src=&quot;images/forest-and-computer.png&quot; width=&quot;150&quot; alt=&quot;Gambar Komputer dari SKODEV&quot;&gt;

		&lt;span&gt;Ini adalah IMG&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

</body> </html>

Berikut lampiran outputnya, https://ibb.co.com/09Dz44h

Kebetulan saya mau sejajarkan box hijau dengan box biru, adakah caranya? Terima kasih. 🙏

css html

@masfarrel

1 Kontribusi 0 Poin

Dipost 2 hari yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Kelas Premium! Belajar bikin website dari nol sekarang

Cara membuat sejajar Div ID

Kelas Premium!
Belajar bikin website dari nol sekarang