如何使右侧的文本位于滑块下方？

<div class="container">
  <div class="slider"></div>
  <div class="text">右侧的文本</div>
</div>

.container {
  position: relative;
  height: 200px; /* 根据实际情况设置高度 */
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* 根据实际情况设置宽度 */
  height: 100px; /* 根据实际情况设置高度 */
  background-color: red; /* 根据实际情况设置样式 */
}

.text {
  position: absolute;
  top: 120px; /* 根据实际情况设置距离顶部的位置 */
  left: 0;
  width: 100%; /* 根据实际情况设置宽度 */
  text-align: center; /* 根据实际情况设置文本对齐方式 */
}