Below are the div elements I am trying to place it side by side. Is it possible?

<div style="padding-left:10px">
  <h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
  <div>sdfds</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Of course you can by using display: inline-block property. Just make sure what you are doing

div {
  display: inline-block;
}

<div style="padding-left:10px">
  <h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
  <div>sdfds</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

SIMPLE CSS CAN HELP :

div{
width : 150px;
height: 150px;
display:inline-block;
}

<div style='background: red'></div>
<div style='background: blue'></div>
<div style='background: orange'></div>
<div style='background: green'></div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Using text in div element it's not best practice! it's better to put your text in p or span tag.

also you can use "display:flex" for div element so it's better to write something like below code:

.container{
display: flex;
flex-direction:row;
gap: 10px;
align-item:center;
}

.line{
margin: 0
}

<div class="container">
<h4 class ="line" >{sev_pas}</h4>
<span>sdfds</span>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use display: inline-block for set div or any other elements.

div{
  display:inline-block;
}

h2{
  background:orange;
  color:#fff;
}

<div style="padding-left:10px">
  <h2>DIV 2</h2>
</div>
<div style="padding-left:10px">
  <h2>DIV 1</h2>
</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Else there are also other methods like using display: flex or display: grid etc.

CodePudding user response：

Just use display: inline-block;

.first-div{
  display: inline-block;
}
.second-div{
  display:inline-block;
}

<div class="first-div" style = "padding-left:10px">
  <h4 class ="line" >ok</h4>
</div>

<div class="second-div" style= "padding-left:10px"> sdfds</div>

<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>