creating a box side by side using JavaScript and CSS

Question

I want to create two separate boxes side by side which shows like the image given below. My JavaScript code is written below. The issue is when I am trying to create the second box it comes down, whereas I want the box beside the first box.

//define your javascript libraries
resource = [
  "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
  "//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]

//add scripts to head
$.getScript(resource[0], function() {
  $.getScript(resource[1], init)
})

//start your widget
init = function() {
  var g = new JustGage({
    id: "gauge",
    value: parseInt($("#6becbadfe55c4b04a589afae48ea4843").text()),
    min: -1000,
    max: 1000,
    title: "Net Income margin %"
  });

  //refresh gauge when calcvalue changes
  $(calcValue).on('DOMSubtreeModified', function() {
    g.refresh($(this).text())
  })
}

<DIV id=gauge style="HEIGHT: 325px; WIDTH: 570px"></DIV>
<SPAN id=calcValue><SpotfireControl id="6becbadfe55c4b04a589afae48ea4843" /></SPAN>

Now the output which I am seeking for is look like:

Need help how to do this?

Answer 1

A div Element has a display: block by default.

Blocks are not on the same line by default.

You have to make your box inline. For instance display: inline-block;

Answer 2

You can either set the div's css to display:inline block or just change it to an inline element like a <span>

You could also look at float:left

The other option would be css3 fanciness involving grid or flexbox but I suspect that would be overkill

Answer 3

CSS is made for managing style/position, not Javascript.

html

<div id="gauge"></div>
<span id="calcValue"><!-- ... --></span>

css

#gauge, #calcValue {
    display: inline-block;
}

#gauge {
    width: 570px;
    height: 325px;
}

#calcValue {
    width: calc(100% - 570px);
}

Answer 4

<div class="somthing">dsfdsf</div>
<div class="somthing">dsfdsf</div>
<div class="somthing">sdfdsfsdf</div>

CSS

.somthing{
  height: 100px;
  width: 200px;
  border: 1px solid black;
  display: inline-block;
}