cssで位置の調節が画像が間に挟まっている為、うまく機能しない

htmlのtextareaで取得した改行ありの文章をphpのpostで受け取って画面に出力しているのですが

同時に画像も出力しているので画像が邪魔でうまく実装したい内容ができません

やりたい事としては画像の左と右にそれぞれ文章があると思いますがそれをまとめて右に持ってきたいです

バグの原因は画像の次にtextareaの文章をコード的には表示しているので最初は画像の囲ったところにそれぞれ
文章がありcssで調節した際にそのまま上に移動してしまったのかと思います

textareaの文章をまとめて右に持ってきたいです

html
1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3
4<head>
5
6<link rel="stylesheet" href="./hagoli.css">
7
8</head>
9
10
11
12
13<body>
14
15<!-- 検索欄 -->
16<form action="" method="POST">
17    <input type="text" placeholder="検索欄" name="look" class="search">
18    <input type="submit" value="検索" name="search" class="searchButton" >
19    </form>
20
21
22
23    
24    
25        <?php   print '<img class="image1" src="../image/'.$id.'/'.$image1.'" >'; ?>
26
27
28     
29        <span class="explanation"><?php  print $explanation; ?></span>
30
31
32
33
34
35</body>
36
37
38
39
40
41</html>

explanation->『textareaの位置を修正部分』
image1->画像の位置調節部分

css
1.search{
2
3    width: 50%;
4    height: 32px;
5    margin-left: 370px;
6
7
8
9}.searchButton{
10
11
12
13    width: 50px;
14    height: 30px;
15
16
17
18
19
20}.image1{
21
22    width: 550px;
23    height: 550px;
24    object-fit: cover; 
25    margin-left: 300px;
26
27}.explanation{
28
29
30
31    position: relative;
32    bottom: 280px;
33
34    left: 100px;
35 
36
37
38}