CSSのみでテキスト、画像をそれぞれ１カラムの中でリキッドレイアウトにしたい

CSSのみでテキストを１カラムの中でリキッドレイアウトにするにはどのように記述すれば良いでしょうか？

HTML
<div class="p-wrapper">
  <div class="p-wrapper__inner">
    <div class="p-wrapper__inner--title">
      <h1 class="pwrapperThird__inner--titleInner">タイトル
  </h1>
    </div>

CSS　
.p-wrapper {
  margin-top: 20px;
  border: solid 2px #C7C7C7;
  outline: solid 5px #EFEFEF;
}
.p-wrapper__inner {
  padding: 10px 0 5px 0;
  margin: 0 3%;
}

.p-wrapper__inner--title {
  border-bottom: solid 1px #BDBDBD;
}

.p-wrapper__inner--titleInner {
  width: 220px;
  background-image: url(../img/kagu_interior.png);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: left;
  padding: 10px 0 10px 25px;
  font-size: 15px;
}

HTMLは現在上記のようになっています。
wrapperとwrapper__innerの幅は320~751です。
”タイトル”の部分をウィンドウ幅に合わせて大きさを変えたいです。

また、<div class="p-wrapperThird__inner--titleInner"><img src="***"</div>
だった場合の画像をリキッドレイアウトにする方法も知りたいです。

タイトルの文字サイズ、画像の縦横比率をウィンドウ幅320~751にかけて大きくしたいです。
宜しくお願い致します。

x_x

2019/10/08 08:01

h1 の子として div は取れません。修正のうえでどうしたいのかを書いてください。

kei344

2019/10/08 08:17

「”タイトル”の部分」は文字サイズのことでしょうか。現状のHTML/CSS全体を提示して、スクリーンショットなどでどの部分をどうしたいか具体的に提示されたほうが回答が付きやすいと思います。

moooaka

2019/10/08 08:27

お二人様ともご指摘ありがとうございます。修正致しましたのでご確認の程お願い致します。

kei344

2019/10/08 08:29

現状のHTML/CSS全体を提示してください。

kei344

2019/10/08 08:34

何度も修正依頼して申し訳ないが、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。Markdown記法が採用されているため、一部文字列が正確に再現できていません。

moooaka

2019/10/08 08:37

こちらこそお手数をおかけしております。これでいかがでしょうか。

kei344

2019/10/08 08:47

画像の状態を再現するには p-wrapper__inner--titleInner という要素も要るはずですがありません。HTML/CSSは要素とその関係によって描画されるため、ある程度状況を再現できる状態にされることをお勧めします。提示されたコードではこうなります ⇒ https://jsfiddle.net/gLh5ezby/