html - How to position an image to the right of text which is a flex child

Question

I'm trying to get #welcome-section img positioned to the right of #welcome-section p

I've tried using float and other potential solutions which I found online but I beleive they didn't work because one of the elements is a flex child.

Here's the codepen: https://codepen.io/jalal_b/pen/abmgvrY?editors=1100

@import url('https://fonts.googleapis.com/css2?family=Share&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

body {
  margin: 0;
}

.nav {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color:rgba(0, 0, 0, 0.6);
}

.nav-list {
  list-style-type: none;
  display: flex;
}

.nav-link {
  text-decoration: underline solid transparent;
  display: block;
  margin-right: 2rem;
  font-family: "Share";
  color: white;
  transition: all 0.3s ease-in-out;
  font-size: 1.2em;
}

.nav-link:hover {
  text-decoration: underline;
  color: light gold;
}

#welcome-section {
  width: 100%;
  height: 100vh;
  font-family: "Cairo";
  background: linear-gradient(54deg, rgba(0,55,255,1) 0%, rgba(0,255,220,1) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#welcome-section h1{
  font-size: 5em;
  z-index: 5;
}

#welcome-section p{
  font-size: 2em;
  display: inline;
  z-index: 5;
}

#welcome-section img{
  height: 300px;
  width: auto;
  opacity: 40%;
  float: left;
  position: absolute;
}

<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
      <a class="nav-link" href="#welcome-section">Welcome</a>
    </li>
    <li>
      <a class="nav-link" href="#projects-section">Projects</a>
    </li>
    <li>
      <a class="nav-link" href="#contact-section">Contact</a>
    </li>
    </nav>
  
  <section id="welcome-section">
    <div>
    <h1>Hey, I'm Jack Guitarson</h1>
    <p>A Responsive Web Designer</p>
      </div>
    <img src="https://i.ibb.co/3kXvJT7/image-removebg-preview-3.png" alt="Coding logo image">
  </section>

question from:https://stackoverflow.com/questions/65895079/how-to-position-an-image-to-the-right-of-text-which-is-a-flex-child

Answer 1

remove flex-direction:column; from the css section and the position absolute and float left from image

@import url('https://fonts.googleapis.com/css2?family=Share&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

body {
  margin: 0;
}

.nav {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color:rgba(0, 0, 0, 0.6);
}

.nav-list {
  list-style-type: none;
  display: flex;
}

.nav-link {
  text-decoration: underline solid transparent;
  display: block;
  margin-right: 2rem;
  font-family: "Share";
  color: white;
  transition: all 0.3s ease-in-out;
  font-size: 1.2em;
}

.nav-link:hover {
  text-decoration: underline;
  color: light gold;
}

#welcome-section {
  width: 100%;
  height: 100vh;
  font-family: "Cairo";
  background: linear-gradient(54deg, rgba(0,55,255,1) 0%, rgba(0,255,220,1) 100%);
  color: white;
  display: flex;
 
  justify-content: center;
  align-items: center;
}

#welcome-section h1{
  font-size: 5em;
  z-index: 5;
}

#welcome-section p{
  font-size: 2em;
  display: inline;
  z-index: 5;
}

#welcome-section img{
  height: 300px;
  width: auto;
  opacity: 40%;
 
}

<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
      <a class="nav-link" href="#welcome-section">Welcome</a>
    </li>
    <li>
      <a class="nav-link" href="#projects-section">Projects</a>
    </li>
    <li>
      <a class="nav-link" href="#contact-section">Contact</a>
    </li>
    </nav>
  
  <section id="welcome-section">
    <div>
    <h1>Hey, I'm Jack Guitarson</h1>
    <p>A Responsive Web Designer</p>
      </div>
    <img src="https://i.ibb.co/3kXvJT7/image-removebg-preview-3.png" alt="Coding logo image">
  </section>