How to add separate text and separate image on the one heigth [CSS/HTML]?

I wanna to set up image and paragraph on one height as I said in title. And I wanna this image to be like the same width and height with the paragraph.

The main problem, if I tried to use my container(I don't really know if it's a container), the image goes inside the paragraph. I got a really terrible headache and didn't solve it yet. Need some help.

This is my code + image of page that I wanna to create:

body {
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
}

.h1_main {
  text-align: center;
  text-shadow: #06FE35 1px 1px 20px;
  font-size: 50px;
}

.pretty_1 {
  margin-top: 50px;
  text-shadow: grey 1px 1px 15px;
  font-size: 40px;
}

.container {
  border: 7px solid #01FE30;
  margin-right: 75%;
  padding: 20px 30px 20px 30px;
  font-size: 30px;
  text-shadow: #F40752 1px 1px 50px;
  text-align: center;
}

.right_image {
  float: left;
}

.ecorp {
  text-shadow: red 1px 1px 6px;
  text-align: center;
}

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
  position: fixed;
  text-align: left;
  bottom: 0px;
  width: 100%;
}

.fsoc {
  font-size: 20px;
  text-shadow: red 2px 0px 0px;
}

.links {
    font-color: black;
    text-shadow: grey 1px 1px 10px;
    text-decoration: none;
    color: black;
    font-size: 26px;
    text-align: center;
}

.center {
  text-align: center;
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MR.Twister</title>
    <link rel='stylesheet' type='text/css' href='podstava.css'>
  </head>
  <body>
    <h1 class='h1_main'>Who is </h1>
    <div class='center'>
      <a href='index.html' class='links'>Main</a>
      <a href='about.html' class='links'>&nbsp;&nbsp;About</a>
      <a href='gallery' class='links'>&nbsp;&nbsp;Galley</a>
    </div>
    <hr>
    <p class='pretty_1'>Wiki Says:</p>
    <p>
      <p class="container"> - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br />
      <small>Hi there Hi there</small></br />
      - - - - - - - - - - - - - - - - - - - - - - - - - - - -   <br />
      You are the best thing to ever happen to me. You are the true definition of a true value. True friendship stands the test of time and you have shown me what it is to have real friends. I value your friendship and I will remain every grateful for your love. Thanks for being my friend. Cheers to our loving friendship.<font color='#6D202C'><small>E</small><small><small>Corp.</small></small></font></p>
    <div class='transparent'>
      <font class='fsoc'color='red'>all rights reserved (c)</font>
    </div>
  </body>
</html>

here is a picture

Solution

There are many ways to accomplish this but using the latest CSS3+ properties such as Flex and Grid, you can create the layout you want. All that is needed for the flex solution is to specify the container to width: 100%; to make the container take full width of the page, allowing you to layout freely, set its display: flex; to use the flex property and set the flex-direction: row; to make the items inside the container be aligned horizontally.

Then separate the right content in a div and the left content in a different div with both being inside the container.

Refer to this fiddle, I've fixed some code issues that you have. Also, don't use the font tag as it's not supported in HTML5, use the style attribute instead. https://jsfiddle.net/9oej1z6p/