Problem - Text animation next to an image

My issue

Hi! I’m beginner, doing my portfolio.
I want the text “thank you” and pic, to be on the middle next to each other.
My Code HTML:

<div class="main">
    <div class="main__img--container"><img src="images/spongecake.jpg" width="60%" alt="pic" id="main__img"></div>
    <div class="main__container">
      <svg viewbox="0 0 100 20">
      <defs>
        <lineargradient id="gradient">
          <stop color="#000"></stop>
        </lineargradient>
        <pattern id="wave" x="0" y="-0.5" width="100%" height="100%" patternunits="userSpaceOnUse">
          <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)">
            <animatetransform attributename="transform" begin="0s" dur="1.5s" type="translate" from="0,0" to="40,0" repeatcount="indefinite"></animatetransform>
          </path>
        </pattern>
      </defs>
      <text text-anchor="middle" x="50" y="15" font-size="15" fill="white" fill-opacity="0.1">
        Thank you! 
      </text>
      <text text-anchor="middle" x="50" y="15" font-size="15" fill="url(#wave)" fill-opacity="1">
       Thank you!
      </text></svg>
    </div>
  </div>

My code CSS:

.main {
    display: inline-block;
    background: #778f71;
}

.main__img--container {
    width: 60%;
}

#main__img .pic {
    height: 50%;
    width: 50%;
    overflow: hidden;
    flex: 1;
}

.main__container {
    height: 100vh;
    width: 100%;
    max-width: 500px;
}

.svg {
    display: block;
    margin: auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
    max-width: 100px;
    height: 60%;
}

Could you help? I think I have tried everything already and I messed up completely.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Thank you. Is anything I can do with this code?

You have a div container for your image main__img--container
and another div container for svg main__container

You can nest both of them inside a new container, and style it with flexbox
( display: flex; and justify-content: center ) this will center both elements next to each other in that container. then, you can change the space between them using margin or padding as you want.


There is no .pic element inside your #main__img element.
also, you are using flex property although you didn’t use flexbox anywhere.


You want these elements next to each other, this display’s value makes that main element very small. I think you can remove it, there is no need for it.