画像と四角形ボックスを横にそろえて並べる方法を教えてください。

Question

実現したいこと

現在、HTMLとCSSでサイトのデザインに取り組んでいます。
そんな中、画像とcssで作成したボックスを横にそろえて並べる方法がわからないので、HTML,CSSのコードをお教えください。

現状

色は、正確ではないのでご了承ください。

<!--左画像-->
    <div class="title">
        <img src="title.png" width="1245" height="629">
    </div>

<!--右画像-->
    <div class="menu"></div>

.title img{
    margin: 5px;
    width: 100%;
    height: auto;
  }

.title{
    width: 70%;
    height: auto;
    background-color: #0487D9;
}

.menu{
    width: 30%;
    height: 100px;
    background: tomato;
}

そうするとこのようになります。
画像とボックスは横に７：３の比率で並べようと思っています。

ここから、どうすれば、赤い部分を青の部分の横に持ってこれますか？
また、高さを青い部分と赤い部分でそろえる方法も併せてお教えください。

比率や色は気にしないでいただきたいのですが、最終的にはこのように配置したいと考えております。

Answer 1

2つの要素を囲むブロックを追加して、CSS FlexBox で横並びにするといいでしょう。

<div class="wrapper">
  <div class="title">
    <img src="https://placehold.jp/1245x629.png" width="1245" height="629">
  </div>
  <div class="menu"></div>
</div>

.wrapper {
  display: flex;
}

.title img{
    display: block;
    margin: 5px;
    width: calc(100% - 10px);
    height: auto;
  }

.title{
    width: 70%;
    background-color: #0487D9;
}

.menu{
    width: 30%;
    background: tomato;
}

Comments

[takio-]

回答ありがとうございます。
無事、思った通りにできました。