How to have <div>'s on the same row/line HTML

June 10, 2022

I am trying to make it so one <div> is on the same line/row another <div> by default they just appear below each other. I have found out that this only happens when the text is multiple lines. Here is the code:

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

.info {
  text-align: left;
  font-size: 20px;
  float: right;
}

.content {
  align-self: auto;
  border: 1px solid black;
  color: gray;
  width: 150px;
  max-width: 150px;
  float: left;
}

.p1 {
  text-align: left;
  margin-left: 10px;
}

<h1>Good Health and Well being</h1>

<div class='info'>
  <h2><b>What do good health and well-being mean?</b></h2>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

  <h2><b>Why are good health and well-being so important?</b></h2>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

  <h2><b>How do you keep good health?</b></h2>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</div>

<div class='content'>
  <h1>Content</h1>
  <p class='p1'>content</p>
</div>

Here is an image of it.

And here is an image when the text doesn’t use multiple lines:

Lastly here is an image of what i want

>Solution :

Reason this is happening is because that having multilines increases the width of your info div. It keeps on adjusting till it becomes (100%-150px) 150 being the width of your content div. Adding width to info will solve the issue , add the width such to give margin in between as I have updated the css.

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

.info {
  text-align: left;
  font-size: 20px;
  float: right;
  width: calc(100% - 200px) 
}

.content {
  align-self: auto;
  border: 1px solid black;
  color: gray;
  width: 150px;
  max-width: 150px;
  float: left;

}

.p1 {
  text-align: left;
  margin-left: 10px;
}

<h1>Good Health and Well being</h1>

<div class='info'>
  <h2><b>What do good health and well-being mean?</b></h2>
  <p>TEXT TEXT TEXT  TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT  TEXT TEXT TEXT TEXT TEXT </p>

  <h2><b>Why are good health and well-being so important?</b></h2>
  <p>TEXT TEXT TEXT TEXT TEXT  TEXT TEXT TEXT TEXT TEXT  TEXT TEXT TEXT TEXT TEXT  TEXT TEXT TEXT TEX </p>

  <h2><b>How do you keep good health?</b></h2>
  <p>T TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT  TEXT TEXT TEXT TEXT TEXT  </p>
</div>

<div class='content'>
  <h1>Content</h1>
  <p class='p1'>content</p>
</div>