CSSで埋め込みGoogleMapと横並びさせているpタグのテキストを上方に移動させたい

Question

#やりたいこと
埋め込みのGoogleMapとpタグを横並びにした状態で、pタグのテキストの位置を上方に移動させたいです。

#現在のブラウザの表示

#現在のコード

.maps p{
  display: inline-block;
  margin: auto 10px auto;

}
.maps{
  text-align: center;
}
.map{
  width: 30%;
  margin: auto;
  display: inline-block;
}

　<div class="maps">
  　<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9176.931104915295!2d134.6321607588903!3d34.232365925580055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3553614c2f370d1b%3A0x78d1b5a470e75961!2z5aSn5aGa5Zu96Zqb576O6KGT6aSo!5e0!3m2!1sja!2sjp!4v1566784920561!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
  　<p>JR鳴門駅から徒歩20分</p>
　</div>

#試したこと
・maps{display:flex;}追加
→テキスト位置は上方に移動したが、画面右端にmapsクラス全体が寄り、かつiframeの幅が小さくなった

わかる方いらっしゃいましたらご教示いただけますと幸いです。
何卒よろしくお願いいいたします。

Answer 1

テキストを上にずらすだけなら下記CSSでいけると思います。

.maps p{
  display: inline-block;
  margin: auto 10px auto;
  vertical-align: top;     // これを追加してください。
}

Comments

[hakoco_12]

ありがとうございます！できました！