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

user_18803876 0
Viewed 65

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

css html
2 Answers

.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>

user_179765990

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>

user_148135770
Related