Как изменить ширину гармошки на 80% экрана?

Question

Я пытаюсь изменить ширину панели до 75% экрана, чтобы я мог отобразить компанию lo go справа от панелей гармошки. Я также пытаюсь убедиться, что одна панель закрывается при открытии другой панели. Может ли кто-нибудь мне помочь?

Это код, который у меня есть в настоящее время, и просматриваю отзывы:

     <style>
        .accordion {
            background-color: white;
            color: black;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: center;
            border: 5px black;
            outline: none;
            transition: 0.4s;
            font: 20px Lato, sans-serif;
        }

        /* This part defines the panel within the accordion and styles it */
        .panel {
            padding: 10 18px;
            background-color: white;
            overflow: hidden;
            text-align: center;
            max-height: 0;
            transition: max-height 0.2s ease-out;
            text-size-adjust: 80%;
            /* Trying to make the text width in the panels to be 80% of the screen size, not working yet */
            -webkit-text-size-adjust: 80%;
            /* Trying to make the text width in the panels to be 80% of the screen size, not working yet */

        }

        /* Defines the propertes of text area's indicated by <p> </p> */
        p {
            font: 16px Lato, sans-serif;
        }

        /* Defines the propertes of text area's indicated by <h1> </h1> */
        h1 {
            font: 30px Lato, sans-serif;
            text-align: center;
        }

        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active,
        .accordion:hover {
            background-color: grey;
        }

        .accordion:after {
            content: '\02795';
            /* Unicode character for the plus (+) sign */
            font-size: 12px;
            float: right;
            margin-left: 5px;
        }

        .active:after {
            content: '\2796';
            /* Unicode character for the minus (-) sign */
        }
    </style>
</head>

    <button class="accordion"> What can we do for you?</button>
    <div class="panel">
        <p> <br> We can make your education cheaper and easier. ;)</p>
    </div>