How to align div components in one line?

byMR

March 22, 2022

The result I want looks like this

What I have currently

So all I want is the tag to be immediately after the title line. This small issue is one I am struggling

Relevant part of Render statement

<div className="headtitle">
              {items.product.name}
              <div className="flexbox-item-tag">{items.product.tags}</div>
            </div>

Items.product.name is the main title containing the drone title.
Items.product.tag is the tag that must follow the title

The css for the headtitle div which contains the title and tag.

.headtitle {
  color: #333333;
  font-family: 'Roboto';
  font-size: 16px;
  line-height: 24px;
  width: 526px;
  text-align: left;
  margin-top: 0px;
  flex-wrap: wrap;
}

The tags class and styling css

.flexbox-item-tag {
  align-self: flex-start;
  background-color: rgba(196, 193, 193, 0.274);
  border: #333333;
  font-size: 12px;
  color: #999999;
  width: 111px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

>Solution :

.flexbox-item-tag should be set as display: inline-block.

The element is a div, therefore its default display is block which means it will render on its own "row", "below" the previous element, as shown in your example.

Note that you’ve set align-self on the .flexbox-item-tag element, which cannot work without the parent element being set as flexbox.