Footer logo/text css/html

Question

I have 3 separate lines of text in footer, that are supposed to stay on the left side, and a logo that is supposed to stay on the right side. No matter what I try in CSS, text and logo do not align. It's either making 3 lines of text fit on just one line, or the logo starts below the text, instead of being in line with it, just on the opposite(right side).

This is my html code:

 <footer>
        <hr>
        <p>line1</p>
        <p>line2</p>
        <p>line3</p>
        
        <img class="logo-footer" src="xxx">
        
        <hr>
        
        </footer>

There has to be a horizontal line at the beginning of the footer and on the bottom of it.This is the picture of what I need to achieve

Answer 1

Is this what you expect

You can learn flex-box by this website https://flexboxfroggy.com/

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

img {
  width: 60px;
  height: 60px;
}

<footer>
  <hr>
 
  <div class="container">
    <div>
      <p>line1</p>
      <p>line2</p>
      <p>line3</p>
    </div>

    <img class="logo-footer" src="https://avatar.iran.liara.run/public/2">
  </div>
  
  <hr>
</footer>

Answer 2

Use a flexbox or a grid; they are much better suited to what you want to achieve. Floats are rarely useful on the modern web.

body {
  margin: 1em;
}

footer {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin-top: 1em;
  border-top: 1px dashed #ddd;
  padding-top: 1em;
}

footer p:first-child {
  margin-top: 0;
}

The body of the page goes here

<footer>
  <div>
    <p>footer line 1</p>
    <p>footer line 2</p>
    <p>footer line 3</p>
  </div>
  <img src="http://picsum.photos/150">
</footer>