antd、tailwindを使ったForm、labelの位置調整について

実現したいこと

Antdとtailwindを使って開発を進めているのですが、以下の調整が上手くいかず、
ご教示いただきたいです。

・黄色マーカーで囲ったところのformとlabelが離れてしまったところの調整
・緑マーカーで囲ったところを灰色の背景色の場所へ位置を調整
リンク内容

前提

FormとLabelが離れてしまっている。
Colの位置調整が分からず、
意図しないところにColが位置している。

該当のソースコード

typescript(Form部)

1 <Form layout="vertical">2 <Form.Item label={<p style={{fontSize: "10px"}}>修正業務開始時刻</p>}>3 <Input placeholder="0:00:00" />4 </Form.Item>5 <Form.Item label={<p style={{fontSize: "10px"}}>修正業務終了時刻</p>}>6 <Input placeholder="0:00:00" />7 </Form.Item>8 <Form.Item label={<p style={{fontSize: "10px"}}>その他業務時間（分）</p>}>9 <Input placeholder="0:00:00" />10 </Form.Item>11 </Form>

typescript(Col部)

1 <div className="bg-[#F4F5F8]">2 <Row>3 <Col span={12}>4 <h3 className="font-bold ml-2">日次レポート概要</h3>5 </Col>6 </Row>7 <Row>8 <Col span={12}>9 <h3 className="font-bold ml-2">契約マスタ</h3>10 </Col>11 </Row>12 </div>13 <Col span={12} offset={12}>14 請求額 15 <br />16 最終合計運賃 17 </Col>

試したこと

divで囲んだり、aline-○○でまとめてみたり自分なりに色々調べて試してみたのですが
上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

初学者により初歩的な質問となっていたら申し訳ございません。
自力で調べて進めていたのですが、実現方法が分からずご教示いただけますと幸いです。