具有第一个子维度的父div

Question

很抱歉没有明确的标题，但基本上我想要做的是：

将有2个孩子，其中一个＆＃34;文本＆＃34;，另一个是红色矩形，父母将保留＆＃34;填充＆＃34; ＆＃34;文本＆＃34;子。

我正在努力与＃34;位置＆＃34;很多时候的规则，任何帮助将不胜感激！谢谢!!

Answer 1

你想要这样的东西???

（下次给出一些代码，我们确切地知道你想要什么，并知道你已经尝试了什么）

    .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

对DanyCode代码进行了一些修改，因此红色边框可以以不同的方式居中：

.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！