Line Break If Value In Array Is Encountered - shopify

Question

I created an in-line table with 3 boxes. I have also captured an array. My question now is, how can I force a line break inside the boxes whenever the strings in my array are encountered?
Desired output: Notice the 3 boxes and how In , oz, and Count are on a second line.
Desired Output
my code so far:
<a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__title text--strong link" style="text-align:center;">
<img src="https://cdn.shopify.com/s/files/1/0581/6434/7087/files/stars.png?v=1648243736" >
<div class="sku-line" style="font-family:'Roboto'; "><h2>{{ product.variants[0].sku }}</h2></div>
{% if settings.plus_enable_collection_headings and product.title contains "|" %}
{% assign product_title = product.title | split: "|" %}
<div class="plus-coll-h1 plus-margin heading h1" style="font-weight:100; font-family:'Roboto' font-style:italic;" > {{ product_title[0] }}</div>
<div class="plus-coll-h2 plus-margin heading h2" style="font-weight:300; font-family:'Roboto'"> {{ product_title[1] }}</div>
{% capture word_break_array %}
IN
oz
grams
color
mm
Count
{% endcapture %}
{% assign num = 2 %}
{% if product_title[2] contains "-" %}
{% assign custom_boxes = product_title[2] | split: "-" %}
{% for val in word_break_array %}
{% if custom_boxes contains val %}
{% assign custom_boxes = custom_boxes | newline_to_br | strip_newlines | split: '<br>' %}
<table class="custom-table">
{% tablerow i in (0..num) %}
<div class="collection-detail-boxes"style="font-weight:800;"> {{ custom_boxes[i] }}</div>
{% endtablerow %}
{% endif %}
{% endfor %}
</table>
{% else %}
<div class="plus-coll-h2 plus-margin heading h2" style="font-family:'Roboto';"> {{ product_title[2] }}</div>
{% endif %}
</a>
{% else %}
{{ product.title | remove: "|" }} <span style=""></span>
{% endif %}