Help with adding External Links as dummy 'Sections' on Categories page

Hi Folks,

I've created two 'dummy' sections to appear on the categories page, called 'Documentation' and 'Integration Guides' - they are links to external URLs. Its pretty much there, but I want these two 'dummy' sections to behave the same way as the real sections do in terms of layout and formatting, so they are spaced the same way and behave the same way when the browser is re-sized etc. So i'd like 'Integration Guides' to sit above 'Troubleshooting' in this instance.

Currently it looks like below:

I have added the code as follows, above the '<div class="section-tree">' section on the categories page:

<h3 class="section-external-link"> 
<a href="https://some URL">
<img class="" src="{{asset 'Hexicon-casestudy.png'}}"style="vertical-align:middle" width=80 height=auto max-width=100px max-height=100px/>Documentation
</a>

<a href="https://some other URL">
<img class="" src="{{asset 'Hexicon-casestudy.png'}}"style="vertical-align:middle" width=80 height=auto max-width=100px max-height=100px/>Integration Guides
</a>
</h3>


<div class="section-tree">

{{#each sections}}

<section class="section">

<h3 class="section-tree-title"> 

<a href="{{url}}">
{{#is id 4405542581521}}<img class="" src="{{asset 'hexicon-healthcare.png'}}"style="vertical-align:middle" width=80 height=auto max-width=100px max-height=100px/>{{/is}}
{{#is id 4405543241361}}<img class="" src="{{asset 'hexicon-Question.png'}}"style="vertical-align:middle" width=80 height=auto max-width=100px max-height=100px />{{/is}}
{{name}}

</a>

</h3>

If anyone has some pointers here that would be greattly appreciated! - im guessing I need to look at the css, but not sure the best way to go about it.

Thank you!