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>

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

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?

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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.