Inline display of div tags

Question

I am trying to get 2 div tags to be inline with each other. When I did use display: inline-block it doesn't format correctly.

What I am trying to achieve see image

Code:

.packaging_details {
  display: block;
  border: solid 1px #000;
  padding: 10px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.heading_texts {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  display:inline-block;
}

.Subheading2 {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.Subheading1 {
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  display:inline-block;
}

<div class="packaging_details">
  <div class="heading_texts">Company Name</div>
  <div class="Subheading1">LABEL</div>
  <div class="Subheading2">
    <span class="logids">Name:</span> ###
  </div>
</div>

Answer 1

You can use flex box as below. The only challenge by doing it this way is to center align the Subheading2 below heading_text, one way is to set flex-basis 100% of the box width - the width of the Subheading1 element.

This solution is for the case when you don't have access or not able to change html structure but if you can change the html structure that can be easily styled with flex-box.

.packaging_details {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #000;
  padding: 10px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.heading_texts {
  flex: 1;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

.Subheading2 {
  flex-basis: calc(100% - 55px);
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.Subheading1 {
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
}

<div class="packaging_details">
    <div class="heading_texts">Company Name</div>
    <div class="Subheading1">LABEL</div>
    <div class="Subheading2">
        <span class="logids">Name:</span> ###
    </div>
</div>

Answer 2

It is always good to wrap parts that are supposed to look differently into seperat containers so you can position them differently. Your Problem here is most likely, that "heading_texts", "Subheading1" and "Subheading2" are on the same Layer / in the same position so they will behave similar in the parent Container.

I can offer you one solution: CSS Flex.

The code for that:

.packaging_details {
  display: block;
  border: solid 1px #000;
  padding: 10px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.heading_texts {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  text-align: end;
  width: 55%;
}

.Subheading2 {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.Subheading1 {
  font-weight: bold;
  text-transform: uppercase;
  text-align: end;
  width: 45%;
}
.inline-container{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

<div class="packaging_details">
    <div class="inline-container">
        <div class="heading_texts">Company Name</div>
        <div class="Subheading1">LABEL</div>
    </div>
    <div class="Subheading2">
        <span class="logids">Name:</span> ###
    </div>
</div>

The Only thing you have to be aware of, is that you position the content of the Line by defining the widths of the 2 containers here, so if you want the logo to be more centered you need to play around with the with of both containers, they always need to sum up to 100% width!