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?

CodePudding user response：

Use display inline block

.content {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
}

<div >Content</div>
<div >Content</div>

CodePudding user response：

.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 >
<div >
First Div
</div>
<div >
Second Div
</div>
</div>