異なるサイズのインラインでdivを正しく表示する

Question

CSSを使用して、以下の種類のボックスを作成したいと思います。 CSSで初心者から、私の最大の関心事は、ヘッダーを作成して、ボックスのサイズにかかわらず、セパレーターラインが心臓画像の前に少しの隙間を持つようにすることです。

これは私の試みです：

HTML：

<div class="block"> 
    <p><em>04-05</em></p> 
    <img class="block_pic" src="..."/> 
</div> 

CSS：

.block { 
    border: solid red; 
    width:250px; 
    height:150px; 
} 

p{ 
border-bottom:solid black 2px; 
width:83%; 
margin:5px; 
} 

.block_pic { 
    width:30px; 
    position:absolute; 
    top: 5.5%; 
    right:86.5%; 
} 

（https://codepen.io/anon/pen/QqwoPV）。私のアプローチは、<p>にborder-bottomをタイムスタンプとともに追加し、後でposition:absoluteでイメージを置き、境界の最後に表示するようにしました。私はそれが最終的に正しい場所に終わるまで何度も何度も何度も変更することによってのみこれを成功させることができました。私がやったことをするのではなく、心のイメージを配置するスマートな方法はありますか？これは、異なるサイズの反応ボックスを作成しようとしているときに便利です。

Answer 1

画像を最初に配置し（p要素の前に）、float: rightを使用してください。そして、以下に示すようにpタグ幅のためcalcを使用します。

https://codepen.io/anon/pen/MEYRVY

.block { 
 
    border: solid red; 
 
    width:250px; 
 
    height:150px; 
 
} 
 

 
p{ 
 
border-bottom:solid black 2px; 
 
width: calc(100% - 45px); 
 
margin:5px; 
 
} 
 

 
.block_pic { 
 
    width:30px; 
 
    float: right; 
 
    margin: 5px; 
 
}

<div class="block"> 
 
    <img class="block_pic" src="..."/> 
 
    <p><em>04-05</em></p> 
 
</div>