Why padding insert automatic line-break?

Question

I want to do something like this: 1. And I have managed to do this layout with some flexbox. When I am using px or vw to set distance between "All", "Active" and "Completed", it looks something like this: 2. But when I am trying to use percentage for padding, it automatically add a new line break for any value of percentage. Ex: for padding: 1%, it is this layout: 3. Why can't I use percentages for padding?

My code:

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .bottom-bar {
            display: flex;
            /* justify-content: center; */
            /* align-items: center; */
            background-color: white;
            border: 1px solid #ddd;
            margin: auto;
            max-width: 1200px;
            padding: 1rem;
        }
        .bottom-bar .status {
            /* margin: 0 auto;
            display: inline-block;
            text-align: left; */
            flex: 0 0 70%;
        }
        .bottom-bar .items {
            /* margin: 0 auto;
            display: inline-block;
            text-align: left; */
            flex: 0 0 30%;
        }
        .bottom-bar .status>label {
            padding: 0 1%; /* you can add percentage but recommended use rem units*/
            padding: .5rem; /*use this*/

            /* not working, add line break */
            /*VS*/
            /*padding: 0 1vw; correct layout */

        }
        .bottom-bar .status>label:first-child {
            border: 1px solid #ddd;
            border-radius: 5px;

        }
        .bottom-bar .items-counter {
            /* margin-left: 5%; */
        }

    <div class="bottom-bar">
        <div class="items">
            <label class="items-counter">Items left: ? </label>
        </div>
        <div class="status">
            <label class="all">All</label>
            <label class="active">Active</label>
            <label class="completed">Completed</label>
        </div>
    </div>