親の明示的ではないタイトルのために申し訳ありませんが最初の子寸法

Question

とdiv要素が、基本的には私がやりたいことはこれです：2つのチャイルズ、「テキスト」の一つであり、別のがあるでしょう

親はテキスト "子"の "パディング"を保存します。

私は多くの時間 "位置"のルールで苦労していた、どんな助けもありがとう！ありがとうございました！！

Answer 1

このようなものが欲しいですか？

（次回、我々は正確に何をしたい知っている、あなたはすでに試したかを知るために、そのためのいくつかのコードを与える）赤枠ができるようにDanyCodeのコードにいくつかの変更

.parent{ 
 
     position:relative; 
 
    width: 500px; 
 
    height: 250px; 
 
    background-color: pink; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items: center; 
 
    justify-content:center; 
 
} 
 

 
.red{ 
 
    width: 50px; 
 
    height: 25px; 
 
    background-color: red; 
 
    position:absolute; 
 
    left:225px; 
 
    bottom:-12px; 
 
}

<div class="parent"> 
 
<div> 
 
<p> 
 
text goes here 
 
</p> 
 
</div> 
 
<div class="red">

Answer 2

を別の方法を中心に：

.parent { 
    position: relative; 
    width: 150px; 
    height: 50px; 
    background-color: pink; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 
.red { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    bottom: -5px; 
    position: absolute; 
} 
.red-thing { 
    width: 5px; 
    height: 10px; 
    background-color: red; 
} 

<div class="parent"> 
    <div> 
    <p>text goes here</p> 
    </div> 
    <div class="red"> 
    <div class="red-thing"></div> 
    </div> 
</div> 

DanyCodeに感謝します！