I want to apply different styling for the Adds and Removes label and featuretypename and name

<style>
    table, th, td  {
  border: 1px solid black;
}
td{
vertical-align: top;
}
table {
  border-collapse: collapse;
}
  .line-break {
        overflow: scroll;
      
    }
    .adds-label {
    padding: 10px;
    color: #8CC641;
    font-weight: bold;
}
    
</style>
<tr>
        <th>S</th>
        {{#each standardChangesPerProduct}}
            {{#if @first}}
                <td  class="line-break">
                    {{#each addedFeatures}}                     
                                <div>{{featureTypeName}}</div>
                                <div>{{name}}</div>
                        {{/each}}           
                </td>   
            {{else}}
                <td  class="line-break">
                    {{#each addedFeatures}}
                        {{#if @first}}
                                <div style="color:red;"><b>Adds</b></div>
                                <div> {{featureTypeName}}</div>
                                <div> {{name}}</div>
                        {{else}}
                            <div> {{featureTypeName}}</div>
                            <div> {{name}}</div>
                        {{/if}}
                    {{/each}}    
                    {{#each removedFeatures}}
                         {{#if @first}}
                         <br />
                            <div class="removes-label">Removes</div>
                            <div>{{featureTypeName}}</div>
                            <div>{{name}}</div>
                        {{else}}
                            <div>{{featureTypeName}}</div>
                            <div>{{name}}</div>
                        {{/if}}
                    {{/each}}          
                </td>
            {{/if}}   
        {{/each}}         
    </tr>

can you please help me with this

css styling works when I run with the html recipe, but when I change it to html to xlxs, css styling not working