JSFiddle - React, Tailwind, and code Playground

HTML

<div id='all-news'>
<div class='news-switch'>Новости<img src='/upload/arrow.png'/></div>
<div id='news-block'>
    
        <div class='news'>
            <h4>Заголовок</h4>
            <p>Текст<br>како-нибудь<br>чтобы был</p>
            <a href="#">Подробнее</a>
        </div>
        <div class='news'>
            <h4>Заголовок</h4>
            <p>Текст<br>како-нибудь<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел<br>чтобы был<br>чтобы был</p>
            <a href="#">Подробнее</a>
        </div>
        <div class='news'>
            <h4>Заголовок</h4>
            <p>Текст<br>како-нибудь<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел<br>чтобы был<br>чтобы был</p>
            <a href="#">Подробнее</a>
        </div>
        <div class='news'>
            <h4>Заголовок</h4>
            <p>Текст<br>како-нибудь<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы был<br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел<br>чтобы был<br>чтобы был</p>
            <a href="#">Подробнее</a>
        </div>




    <div class='news-switch bottom'>Новости<img src='/upload/arrow.png'/></div>
</div>
</div>

CSS

#news-block::-webkit-scrollbar { 
    display: none; 
}
#all-news{
    position:fixed;
        }
    .news-switch{
        background-color: #008cba;
        border: 1px solid #006687;
        padding: 5px 10px 5px 10px;
        left: 0;
        position: absolute;
        color: white;
        cursor: pointer;
        z-index:100;
        }
    .bottom{
        bottom:0px;
        width:350px;
        }
    .bottom>img{
        transform:rotate(180deg) !important;
        }
    .news-switch>img{
        margin-left:10px;
        margin-top: 5px;
        float: right;
        }
    #news-block{
        display:none;
        background-color: #008cba;
        border: 1px solid #006687;
        padding: 40px 5px 45px 5px;
        left: 0;
        position: absolute;
        color: white;
        width:350px;
        height:500px;
  overflow-y: auto;
        }
    .news{
        background-color: #5bc0de;
        padding: 1px 7px 30px 7px;
        margin-bottom: 5px;
        }
    .news h4{
        text-align: center;
        }
    .news p{
        text-indent: 15px;
        }
    .news a{
        color: rgba(21, 20, 20, 0.37);
        text-decoration:none;
        float: right;
        }
    .news a:hover{
        color: rgb(0,0,0);
        padding: 5px;
        font-weight: bold;
        }

JavaScript

var rotate=0;
$('.news-switch').click(function(){
    if(rotate>=360) rotate=0;
    $('.news-switch>img').css('transform','rotate('+(rotate+=180)+'deg)');
    if(rotate==180) $('.news-switch').css('width','350px');
    else $('.news-switch').css('width','110px');
    $('#news-block').toggle();
    });