how can i make my field value not floating from lable?

Question

my number id value is a little bit floating from the lable, it's not right next to lable, how to make my number id value look like customer id value. the customer id is not my code, i inherit and add number id field this is my code

    <?xml version="1.0" encoding="utf-8"?>
<odoo>

    <record id="view_customer_form_number_id" model="ir.ui.view">
        <field name="name">view.customer.form.number.id</field>
        <field name="model">res.partner</field>
        <field name="inherit_id" ref="base.view_partner_form"/>
        <field name="arch" type="xml">
              <xpath expr="//field[@name='name']" position="attributes">
                <attribute name="invisible">1</attribute>
            </xpath>
            <xpath expr="//field[@name='company_type']"  position="after">
                <div class="oe_title">
                    <h2>
                        <field name="number_id"  style="width: 30%%"  placeholder="Number ID"/>
                    </h2>
                    <h1>
                        <field name="name" style="width: 100%%"/>
                    </h1>
                </div>
            </xpath>
        </field>
    </record>
</odoo>

This is the image of both field, just to be clear:

Answer 1

Try

<h2 class="align-items-center">
    <field name="number_id"  style="width: 30%%"  placeholder="Number ID"/>
</h2>

or

<h2>
    <field name="number_id"  class="align-self-center" style="width: 30%%"  placeholder="Number ID"/>
</h2>