display: inline-blockが効きません、横に並べるには

Question

前提・実現したいこと

二つの要素を横に並べたいです。

二つのdiv要素を横並びにしたいのですが、
displayやflowを使用しても効きません。

横並びにしたいのはdivのintroduce要素とmyphoto要素です。

発生している問題・エラーメッセージ

縦並びから変わらない。

該当のソースコード

  	<section class="wrapper">
		<div class="introduce display">
			<div>
				<h2 class="name">テキスト</h2>
				<p class="font-sub">テキスト</p><br>
				<p class="font-main"><span style="font-size:27px;">テキスト</span>テキスト
				</p>
			</div>
			<br><br>
			<div>
				<p class="font-sub">テキスト</p>
				<div class="twitter">
					<img class="img-03" src="./img/img03.png" alt="twitter">
				</div>
			</div>
		</div>
		<div class="myphoto display">
			<img class="img-02" src="./img/img02.png" alt="顔写真">
		</div>
	</section>

.name {
	font-size: 30px;
}

.font-main {
	line-height: 30px;
}

.font-sub {
	font-size: 14px;
}

.twitter {
  margin-top: 20px;
}

.display {
	display: inline-block;
}

.img-03 {
	width: 8%;
}

.img-02 {
	width: 25%;
}

試したこと

・diplay: inline-block
・flow: left
・width50%指定

補足情報（FW/ツールのバージョンなど）

Comments

[macaron_xxx]

このコードだと横並びになっています。
画像の大きさによると思いますが。

[aruto]

ご回答ありがとうございます。
画像サイズの変更、ブラウザの大きさを変更をしましたら横並びに表示されました。

Answer 1

画像サイズを10%以下に変更、ブラウザの大きさをフルスクリーンに変更をしましたら横並びに表示されました。