How to align two headers in the same row? - html

Question

I am trying to align two headers, an h1 and h2 element, in the same row.
I used this code to create a number in a circle which represents the first header and a headline "Device name" which is the second header:
.circle {
border-radius: 45%;
width: 30px;
height: 20px;
padding: 0.5px;
background: #E6354A;
border: 3px solid #E6354A;
color: #FDFEFE;
text-align: left;
font-size: 5px;
}
<table cellpadding='0' cellspacing='0' border='0' border-collapse='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4' <div style='clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style='font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>
For some reason the circle with the number inside appears in one row and the device name header appears in a row beneath it. Can someone tell me how to make them appear side by side?

Answer 1

It is due to fact that divs and headings are block elements by default, which means they take up all of the space and make other block elements have a separate row. To change this, you would require either to float them, set them as flex, grid, or inline-block element.
I approached to set them as inline-block since it is the fastest, but it really comes down to requirements.
<style>
.circle {border-radius: 45%;width: 30px;height: 20px;padding: 0.5px;background: #E6354A;border: 3px solid #E6354A;color: #FDFEFE;text-align: left;font-size: 5px;}
.circle, h2 {display: inline-block;}
</style>
<table cellpadding='0' cellspacing='0' border='0' border-collapse ='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4'>
<div style= 'clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style = 'font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>

Answer 2

you can't have 2 header side by side at the same time, because the definition of header is a one row at the top of the table. So make sure you use the correct definitions.

Answer 3

Wrap the headers in a div and make it flex
<style>
div {
display: flex;
}
h1 {
widht: 50%;
}
</style>
<div>
<h1>HEADER1</h1>
<h1>HEADER2</h1>
</div>
Flex direction is row by default, note that I apply width: 50% to create two even columns. You may want to align and justify as well, have a look at align-items and justify-content properties.