Hi,

First you need to add a css file by following:

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="Your module name/static/src/scss/yourcss file name.scss"/>
    </xpath>
</template>

Then you can add your class and make sure that in class ksp you have added some css codes as well.
For example: In css code,

.ksp {
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
}

Then in XML Code,

<t t-if='website.warehouse_ids'>
    <t t-set="product_variant" t-value="product.env ['product.product']. browse (combination_info ['product_id'])"/>
    <span class='o_not_editable' style='color: # 239B56'>
        <t t-esc='product_variant'/>
        Unit (s) available
    </span>
    <t t-att-class="'top_left'">
        <span>Your text Here</span>
    </t>
    'OR'
    <div class="ksp">Your Text/Code/required field here</div>
</t>

For example:

<div class="ksp"> <t t-esc = 'product_variant' /> Unit (s) available</div>

Otherwise you can add css code directly into XML as,

<span t-att-style="'color: black;'
  'font-size: 12px'
                  'font-weight: bold;'">
    <t t-esc='product_variant'/>
    Unit (s) available
</span>

Regards