-2

How should you put an image on the left of the heading name?

 return (
    <div className="header">
      <img src={"/images/logo.png"} width="10" height="5" />
      <p className="name">heading name</p>
      <div className="header-right">
Nick Vu
  • 14,512
  • 4
  • 21
  • 31
Renu
  • 71
  • 1
  • 9
  • 1
    It isn't clear what the problem you have is. Is the image not appearing? Are you asking about the layout? – Quentin May 03 '22 at 15:11
  • Possible duplicate: https://stackoverflow.com/questions/3113481/make-an-image-and-a-paragraph-sit-next-to-each-other – Quentin May 03 '22 at 15:13

1 Answers1

-1

In your header class, which is basically a container for the img, p and div, add a grid.

.header {
  display: grid;
  grid-template-columns: 50px 1fr 50px; // This will create 2 columns of 50 pixels, and the middle column will fill the remaining space  grid-template-rows: 1fr; // just one row
  height: 100%;
  width: 100%;
}


return (
    <div className="header">
      <img src={"/images/logo.png"} width="10" height="5" />
      <p className="name">heading name</p>
      <div className="header-right">
P Savva
  • 309
  • 1
  • 5