Javascriptを利用して、画像の高さを取得して、文字列に付与した方がいいと思います。 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <head> <style> .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; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".gazou-yoko").children().eq(1).height($("img").height()); }); </script> </head> <body> <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> </body> </html> <!-- end snippet -->