ウィンドウサイズを縮小すると文字が重なってしまう

ウィンドウサイズを縮小すると文字が重なってしまうのですが、どうしたらいいでしょうか？？

ウィンドウサイズが最大の場合は、文字の切れ目(<p>タグで区切ったところ)を指定したいです。ウィンドウサイズが小さい時はどこで切れても大丈夫です。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>
 <title>あああああああああ</title>
<link rel="stylesheet" href="style.css" type="text/css">

<style>

.body{
   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
}

.title p {
  font-size: 45px;
  font-weight:  bold;
  text-align: left;
  padding: 0;
  margin-top: 20px;
  margin-left: 10vw;
}

.title img{
  width: 15px;
  height: 15px;
}

.title span{
  font-size: 15px;
  font-weight:  thin;
  text-align: left;
  color: rgba( 0, 0, 0, 0.5);
}

.title p:first-child {/*20211215 terateil参照*/
    margin-block-end: -30px;
}

.title p:last-child {/*20211215 terateil参照*/
    margin-block-end: -5px;
}

.baloon1{
  text-align: center;
}


.baloon1 img{
  width: 80%;
  height: auto;
}

.baloon2{
  padding-right: 50px;
}

.textbox2 p{
  font-size: 18px;
  text-align: left;
  margin-top: 30px;
  margin-left: 10vw;
  line-height: 0px;
}


</style>
</head>

<body>

<div class="title">
 <p>あああああああああ</p>
 <p><span><img src="image/カレンダーのフリーアイコン4-1.png"> POSTED 2020年12月30日　<img src="image/人物アイコン.png"> ADMIN</span></p>
</div>
<div class="baloon1">
  <img src="image/blue_background.png" alt="">
</div>
<div class="baloon2">
  <div class="textbox2"><!--ここの部分がおかしくなってしまう-->
 <p>ああああああああああああああああああああああああああああああああああ</p>
 <p>あああああああああああああああああああああああああ</p>
 <p>ああああああああああああああああああああああああああああああ</p>
  </div>
</div>

</body>