How can I display two metafields on the same line in a custom liquid block?

[mattks]

I have 2 metafields I am including in a custom liquid block: One is a file (image) and one is rich-text.

I have figured out how to include both to make them functional and visible, but I want to put them on the same line.

When I add this code, they always separate into 2 lines:

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

[YOD_Solutions · Accepted solution]

A simple solution is the add two divs inside another div block:

<div style="display:flex">

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>
<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

</div>

You might need to add other styling to the parent div depending how the content appears.

[YOD_Solutions · Accepted solution]

A simple solution is the add two divs inside another div block:

<div style="display:flex">

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>
<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

</div>

You might need to add other styling to the parent div depending how the content appears.

[mattks]

That worked well!

If I wanted two lines of this code, how would I control the space between them?

I tried this, but a lot of space was added between the 2 lines:

<div style="display:flex;">
<div style="width:18px;">
{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>
</div>

<div style="display:flex;">
<div style="width:18px;">
{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>
</div>

[YOD_Solutions · Accepted solution]

It is a bit difficult to comment without seeing your html code. Please refer this regarding flex positioning: Aligning items in a flex container - CSS: Cascading Style Sheets | MDN (mozilla.org)