eldgammel

Плюс к сказанному, Inline стиль имеет самый высокий приоритет, игнорируя CSS правила, распространяющиеся на родителя и одноименные элементы/классы. Считается порочной практикой использовать инлайны в продуктиве, т.к. это усложняет поддержку проекта.

То же самое можно сказать про значение "!Important" в свойствах CSS.

Родительскому делаем:

div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

Детям делаем:

.top {
   height: calc(100% - 200px);
}

.bottom {
  flex: 0 0 200px;
}

Можешь сделать по такому принципу (я только заменил onsubmit на click для удобства)

const form = document.forms.cargoData;
  
  
  form.addEventListener('click', function(e) {
    e.preventDefault();
    const chooseService = form.chooseService.value;
    console.log(chooseService)
  });

И поменяй у формы action на name

<div id="pdf-links"></div>

<div id="control-buttons">
  <button>Кнопка 1</button>
  <button>Сборосить</button>
</div>

const arr = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

document.querySelector('#control-buttons').addEventListener('click', ({target}) => {
  if (!target.closest('button')) return;  
  document.querySelector('#pdf-links').innerHTML = (target.innerText === 'Кнопка 1') 
    ? arr.map(e => `<div><a id="${e.id}" href="${e.pdf}">${e.title}</a></div>`).join('') 
    : '';
})

<div>
  <button onclick="pressButtonA()">Кнопка 1</button>
  <button onclick="Again()">Сборосить</button>
</div>
  <div id="links">
    
</div>

var arr = new Array();
arr[411] = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

function pressButtonA(){
  
  var links = document.getElementById('links');
  arr.forEach(function(v){  
    if(typeof v == 'object'){
      v.forEach(function(v){
        if(typeof v == 'object'){
          var a = document.createElement('a');
          a.href = v.pdf;
          a.id = v.id;
          a.textContent = v.title;
          links.appendChild(a);
        }
      })
    }
    
  });

}
function Again(){
   var a = document.getElementById('links');
   while(a.firstChild){
     a.removeChild(a.firstChild);
   }
}

.purchase__button { border: none; outline: none; }

https://jsfiddle.net/y8ewfyu4/15/

Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:
<section> — смысловой или логический раздел документа;
<article> — самостоятельный и независимый раздел документа.
Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:
<div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
<section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
<article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.
Новые структурные теги HTML5