1

I have 2 div components, Is there a way to make it inline. Right now it is coming in 2 lines

<div style = "padding-left:10px"><h4 class ="line" >Sev: </h4></div>
<div style = "padding-left:10px"><span class="center"> Weekly : 122</span></div>
manu p
  • 952
  • 4
  • 10
  • Does this answer your question? [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) – Roy Oct 25 '21 at 08:48
  • Look at CSS Flex. You can align items in rows or columns. Link For [W3Schools link for flex box](https://www.w3schools.com/css/css3_flexbox_items.asp) – Abhishek Kumar Oct 25 '21 at 09:07

2 Answers2

2

By default the div container has a block rendering behaviour. If you want to have a default inline behaviour you may use span tag instead, or if you prefer you can use CSS to change the rendering type by adding display: inline; or display: inline-block; if you want to have control over the width/height properties.

Your code may look like this :

<div style="display: inline-block; padding-left:10px"><h4 class="line" >Sev: </h4></div>
<div style="display: inline-block; padding-left:10px"><span class="center">Weekly : 122</span></div>
ibi0tux
  • 2,481
  • 4
  • 28
  • 49
2

There is lots of way to doing that ,one way is that:
<div style = "display: inline-flex; padding-left:10px"><h4 class ="line" >Sev: </h4></div>

<div style = "display: inline-flex; padding-left:10px"><span class="center"> Weekly : 122</span></div>
second way:

<div style = "display: inline-grid; padding-left:10px"><h4 class ="line" >Sev: </h4></div>

<div style = "display: inline-grid; padding-left:10px"><span class="center"> Weekly : 122</span></div>

Prashant Chouhan
  • 51
  • 8