縦書きキャプションを画像の高さとレスポンシブ的に合わせる

例えば60%のペアレント幅の画像を導入するとしたら、どうやって画像と側にある縦書きキャプションの高さを画像の高さと合わせればいいでしすか。望ましい結果は、下図のようです。

様々な問題が出ています。例えば、このようにすると、本文はの外になっています（Chromeブラウザーの開発者ツールで発見しました）：

.gazou-yoko{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
  }
  
 .gazou-yoko div:first-child{
   width: 60%;
 }
 
 .gazou-yoko div:first-child img{
   width: 100%;   
 }
 
  .gazou-yoko div:nth-child(2) div{
    writing-mode: vertical-rl;
    background-color: #FFA07A;
  }

<div class="gazou-yoko">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/LamborghiniMurcielagoLP640Versace2.JPG">
  </div>
  <div>
    <div>
    ムルシエラゴ（Murciélago ）は、イタリアの自動車メーカーランボルギーニが2001年から2010年にかけて製造したスーパーカー。「ムルシエラゴ」はスペイン語で「コウモリ」の意味。（情報源：<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">Wikipedia</a>）
    </div>
  </div>
</div>

そのほかに、横書きの<div>は勝手に高さ設定する事があります。