New Order Creator - Copy this Html, Tailwind Component to your project

Design this ui smooth and responsive <div> <h2>Create New Order</h2> <! Hidden Fields for Branch ID and Entry User > <input type="hidden" id="branch_id" value="{{ request.session.branch_id }}"> <input type="hidden" id="entry_user" value="{{ request.user.username }}"> <div> <! Left Section Form and Order List > <div> <! Medicine Search and Input Fields > <form id="order form"> <! Search Medicine > <div> <label for="medicine search">Search Medicine:</label> <input type="text" id="medicine search" placeholder="Enter medicine name"> <ul id="medicine results" class="list group hidden"></ul> <div id="search error message" class="hidden"></div> <! Error message container > </div> <! Quantity by Box > <div> <label for="quantity box">Quantity by Box:</label> <input type="number" id="quantity box" value="0" min="0"> </div> <! Quantity by Unit > <div> <label for="quantity unit">Quantity by Unit:</label> <input type="number" id="quantity unit" value="0" min="0"> </div> <! Discount > <div> <label for="discount">Discount (%):</label> <input type="number" id="discount" value="0" min="0" max="100"> </div> <! Add to Order Button > <div> <button type="button" id="add item btn"> Add to Order </button> </div> </form> <! Order Items Table > <div> <table> <thead> <tr> <th>Medicine</th> <th>Quantity (Box)</th> <th>Quantity (Unit)</th> <th>Discount (%)</th> <th>Price Per Item</th> <th>Total Price</th> </tr> </thead> <tbody id="order items"></tbody> </table> </div> <! Create Order Button > <div> <button type="button" id="create order btn"> Create Order </button> </div> </div> <! Right Section Medicine Info Display > <div> <h4>Medicine Details</h4> <p><strong>Name:</strong> <span id="medicine name"></span></p> <p><strong>Purchase Price:</strong> <span id="medicine purchase price"></span></p> <p><strong>Retail Price:</strong> <span id="medicine retail price"></span></p> <p><strong>Commission:</strong> <span id="medicine commission"></span></p> <p><strong>Profit (PKR):</strong> <span id="medicine profit"></span></p> <p><strong>Available Quantity (Boxes):</strong> <span id="medicine available boxes"></span></p> <p><strong>Available Quantity (Units):</strong> <span id="medicine available units"></span></p> <p><strong>Description:</strong> <span id="medicine description"></span></p> </div> </div> </div>