Hi Ruben, try this

Create an additional field near the product to hold it's space.

Add class to the Many2one field and additional field

Then write style to adjust the width and to hide additional field

Example

<page string="Order Lines">

    <style>
         //Adjust width
        span.oe_form_field.oe_form_field_many2one.oe_form_field_with_button.Your-Custom-Class.oe_form_required{min-width:129px;z-index:1} 
         // hide additional field
        .oe_form_field.oe_form_field_text.to-be-hidden.oe_form_required{visibility:hidden} 
    </style> 

        <field name="order_line" mode="tree,kanban" attrs="{'readonly': [('state', 'in', ('done','cancel'))]}"> 
            <form string="Sales Order Lines"> 
                 .......
            </form>
              <tree string="Sales Order Lines" editable="bottom" decoration-info="invoice_status=='to invoice'"> 
                <field name="sequence" widget="handle"/> 
<!-----------------------------------------Both fields---------------------------------------------->
                <field name="product_id" class="Your-Custom-Class" attrs="{'readonly': ['|', ('qty_invoiced', '&gt;', 0), ('procurement_ids', '!=', [])]}" context="{'partner_id':parent.partner_id, 'quantity':product_uom_qty, 'pricelist':parent.pricelist_id, 'uom':product_uom, 'company_id': parent.company_id}" /> 
                <field name="name" string="" class="to-be-hidden"/>
<!------------------------------------------------------------------------------------------>
                     ......
          </field>
</page>