2 horizontal colors in background, one of them is wider that the other, please see the photos

I need to add hover box over a slider in my website , note that I do not want to edit the HTML . I need just to modify the code in css

and I need this box to have two colors aligned horizontally , I achieved that with the following code

 .u-layout-carousel .u-over-slide {
           height: Auto;
           width: auto;
           position: fixed ;
        background: linear-gradient(180deg, #ffcc00 70%, #64482c 30%);
        top: 210px;
        left: 700px;
    }

But in the same time , I need the second color to be wider that the first one (the upper )

like this exactly what I want to achieve

but with my code , I have this ,my code output

Please note , I want to have one element only , and I can not edit the HTML SO , the change will be only in the CSS....