<div>
    <div className="mailnavigation">
        <div className="border-bottom">
            <Button className="gradient-button border-0 text-md" block>Compose</Button>
        </div>
        <div className="nav d-flex flex-column border-bottom">
            <ul className="list-untsyled pl-0 mb-0">
            <li>.....<s/li>
            ...............
            ................
            </ul>
    </div>
    <div className="maillist">
        <Form inline className="position-relative d-flex border-bottom">
            <FormControl type="text" placeholder="Search Message or Name…" className="mr-sm-2 p-l-35 border-0 w-100" />
            <Button variant="link" className="position-absolute project-serach-btn">
            <i className="fa fa-search text-ghostgray"></i>
            </Button>
        </Form>
        <ul className="list-unstyled mailers-list mb-0 overflow-auto">
        <li>............</li>
        ...................
        ......................
        </ul>
    </div>
    <div className="mail-container">
        <div className="mail-header border-bottom">
            <div className="d-flex align-items-center m-b-19">
                <div>Design</Badge></div>
                <div>
                .................
                ..................
                ....................
                ..............
                </div>
            </div>
        </div>
    </div>
</div>