如何将右侧的文本框置于图片下方

<div class="container">
  <img src="image.jpg" alt="图片">
</div>
<div class="container">
  <textarea rows="4" cols="50">文本框内容</textarea>
</div>

.container {
  width: 100%;
}

.container img {
  display: inline-block;
  float: left;
  width: 50%;
}

.container textarea {
  display: block;
  clear: both;
  margin-top: 20px;
  width: 100%;
}

<div class="container">
  <img src="image.jpg" alt="图片">
  <textarea rows="4" cols="50">文本框内容</textarea>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.container img {
  width: 100%;
}

.container textarea {
  margin-top: 20px;
  width: 100%;
}