Переполнение текста в соседней кнопке при начальной загрузке

Question

У меня есть веб-страница, где вся страница разделена на две части: левую и правую. Раздел показан ниже. В левой части у меня есть две кнопки рядом и одна кнопка с длинной текстовой строкой "Редактировать категории". Эта кнопка переполняет текст и в итоге сворачивается и накладывается поверх другой. Я разработчик, но на самом деле я не занимаюсь дизайном. Пробовал с помощью flex, но, кажется, не работает. Ожидаемое поведение для этой кнопки - две кнопки должны быть рядом на большом экране и помещаться в средне маленькое и очень маленькое разрешение. Я тоже пробовал ставить col-sm, col-md, col-xs на моих divs, который содержит <a> но нолук.

 <!-- Start Left Section -->
    <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
        <div class="row">
            <div class="col-lg-6">
               <a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
            </div>
            <div class="col-lg-6">
               <a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
            </div>
         </div>
    </div>
    <!-- Start Right Section-->
    <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
    </div>

Answer 1

Для достижения ожидаемого результата используйте опцию ниже

a{
    white-space:normal !important;
    word-wrap: break-word; 
}

Пример кода - https://codepen.io/nagasai/pen/MVRwoN