How to make the text and the image appear next to each other?-CodePudding

How do I make the image and the text appear next to each other?(text on the left, image on the right)

.desc2text= the text .goals= the image

<style>
 .desc2text {
     text-align:center;
  }
  
  .goals {
  }
</style>

 <p >Sunway Group’s four pillars of sustainability are outlined based on the 17 goals under the
United Nations Sustainable Development Goals (UN-SDG). This SDG focuses on developing
and expanding renewable energy resources such as sun, wind, hydropower, liquid and solid
biofuels, biogas and geothermal. These renewable sources of energy do not emit greenhouse
        gasses to the atmosphere and therefore are ideal for the environment and human health.</p>
        <img src="https://assets.sunwaypyramid.com/E-SDGs-Poster1-1577247095101/w960.png" >

CodePudding user response：

.In_box
{
display:flex;
align-items:center;
}
.desc2text
{
width:55%;
}
.goals{
width:45%;
}

<div >

<p >Sunway Group’s four pillars of sustainability are outlined based on the 17 goals under the
United Nations Sustainable Development Goals (UN-SDG). This SDG focuses on developing
and expanding renewable energy resources such as sun, wind, hydropower, liquid and solid
biofuels, biogas and geothermal. These renewable sources of energy do not emit greenhouse
      gasses to the atmosphere and therefore are ideal for the environment and human health.</p>
      <img src="https://assets.sunwaypyramid.com/E-SDGs-Poster1-1577247095101/w960.png" >
</div>

CodePudding user response：

You can achieve this by wrapping the text and image inside a div and applying display: flex to the div container with place-items: center.

.container {
  width: 100vw;
  display: flex;
  place-items: center;
}

.desc2text {
  text-align: center;
  flex: 1 0 30%;
}
.goals {
  flex: 1 1 60%;
  max-width: 100%;
}

<div >
  <p >Sunway Group’s four pillars of sustainability are outlined based on the 17 goals under the United Nations Sustainable Development Goals (UN-SDG). This SDG focuses on developing and expanding renewable energy resources such as sun, wind, hydropower,
    liquid and solid biofuels, biogas and geothermal. These renewable sources of energy do not emit greenhouse gasses to the atmosphere and therefore are ideal for the environment and human health.</p>
  <img src="https://assets.sunwaypyramid.com/E-SDGs-Poster1-1577247095101/w960.png" >
</div>

Hope this answers your question.

CodePudding user response：

You can make use of flex for this. Use this flex class with a wrapper div.

.wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
}
.desc2text
   {
  width:55%;
   }
.goals{
  width:45%;
   }

<div >
  <p >Sunway Group’s four pillars of sustainability are outlined based on the 17 goals under the United Nations Sustainable Development Goals (UN-SDG). This SDG focuses on developing and expanding renewable energy resources such as sun, wind, hydropower,
    liquid and solid biofuels, biogas and geothermal. These renewable sources of energy do not emit greenhouse gasses to the atmosphere and therefore are ideal for the environment and human health.</p>
  <img src="https://assets.sunwaypyramid.com/E-SDGs-Poster1-1577247095101/w960.png" >
</div>