'Is there a way to get a <div> in the same line of another <div>?

So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?

Image

htmlcss


Solution 1:[1]

Use display inline block

.content {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>

Solution 2:[2]

.firstDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 150px;
  border-radius: 30%;
  background-color: grey;
}

.secondDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 150px;
  border-radius: 30%;
  background-color: grey;
  margin-left: 10px;
}

.mainDiv {
  
  display:flex;
  flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kennarddh
Solution 2 Sumit Sharma

Related Questions