Move product rating to the same line as the title

[btwu10]

 

How do I move the product rating to the same line as the title? Specifically, how do I move it to the right of the title and remove the space between the title and description?

[Maxleontech]

To move the product rating next to the title in Shopify Btwu

# HTML
```
<div class="product-title-container">
<h2 class="product-title">{{ product.title }}</h2>
<span class="product-rating">{{ product.metafields.reviews.rating }}</span>
</div>
```

# CSS
```
.product-title-container {
display: flex;
align-items: center;
}
```

[tim · Accepted solution]

You can do this with CSS and use "Custom CSS" setting of the section to avoid editing the theme code.

Try this custom CSS:

safe-sticky {
  display: flex;
  flex-wrap: wrap;
  --rating-width: 3rem;
}
safe-sticky > * {
  width: 100%;
}
safe-sticky > .product-info__title {
  width: calc(100% - var(--rating-width));
}
safe-sticky > .product-info__rating {
  width: var(--rating-width);
}