HTML、可変行の下の無駄な空白をなくしたい

HTMLで可変行の下の項目の空白をなくしたい
以下のHTMLですが、こちらタイトルは1行～3行になります。
その下のプライスを4行目あたりに表示するのですが、タイトルが1行の時には、2行目に表示したいです。

該当のソースコード

   <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>


<style type="text/css">
@page{
    margin: 0;
    padding: 0;
    size:300px 375px;
}

body{
    background-color:#ffffff;
    margin: 0px;
    padding: 0px;
    font-family:'游ゴシック体', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
}
.recogazo_img{
    width: 100%;
    hight: 60%
    border: 0px;
}
.recogazo_title{
    height:60px;
    font-size:15px;
    line-height:15px;
    color:#000;
    margin:0px;
    padding-top:0px;
    text-align:left;
    word-wrap:break-word;
}
.recogazo_price_string{
    margin: 0px;
    font-size: 15px;
    line-height: 0px;
    text-align: left;
    color: #c8391c;
    padding-bottom: 0px;
}
.img_l img{
    border: 0;
    margin: 0;
    height: 235px;
    width: 235px;
}

</style>
</head>


<body>
 <div class="img_l"><img src="" alt=""></div>

<img class="recogazo_img" src="{{ img_url }}">
<div class="recogazo_title">{{ title | safe}}</div>
<div class="recogazo_price_string">{{ price_string | safe}}</div>

</div>
</body>
</html>