我正面臨一個問題，我不能在同一行中水平對齊級別標簽內容和輸入字段。

我已經使用Tailwind CSS框架和HTML5一起建立了這個網站

我正在分享我的代碼:

<!------------------ 
                    Calculation 
                ------------------->
                <div class="w-1/2 mx-auto">
                    <!-- Income & Expense -->

                    <!-- Income -->
                    <h4 class="text-lg font-semibold text-center mb-4">Income</h4>
                    <div class="w-1/2 mx-auto inline">
                        <label for="">Income:
                            <input type="text" class="border-2 bg-slate-200">
                        </label>

                    </div>


                    <!-- Expenses -->
                    <h4 class="text-lg font-semibold text-center mb-4 mt-4">Expenses</h4>


                    <div class="w-1/2 mx-auto mb-4">
                        <label for="">Food:
                            <input type="text" class="border-2 bg-slate-200">
                        </label>
                    </div>
                    <div class="w-1/2 mx-auto mb-4">
                        <label for="">Rent:
                            <input type="text" class="border-2 bg-slate-200">
                        </label>
                    </div>
                    <div class="w-1/2 mx-auto mb-4">
                        <label for="">Cloth:
                            <input type="text" class="border-2 bg-slate-200">
                        </label>
                    </div>


                    <!-- Calculate Button -->
                    <div class="w-1/2 mx-auto mt-5">
                        <button class="bg-sky-600 text-white font-medium px-10 py-2 rounded">Calculate</button>
                    </div>

                    <h4 class="text-lg font-semibold text-center mb-4 mt-4">Total Expenses: <span>00</span></h4>
                    <h4 class="text-lg font-semibold text-center mb-4 mt-4">Balance: <span>00</span></h4>