Adding HTML vertical line inside tabber

Question

Website: kancolle.wikia.com/wiki/User:Rimedimichelangelo

Code in use: wiki markup (en.wikipedia.org/wiki/Wiki_markup)

MediaWiki version at the time of writing: MediaWiki version 1.19.24 (community.wikia.com/wiki/Help:MediaWiki)

Wikia built-in extension in use: tabber (community.wikia.com/wiki/Help:Tabber)

Particular constraint: non being able to use 'div style' in wikia as reported by one of the moderators: kancolle.wikia.com/wiki/Thread:390020

Specific Issue: Unlike other "vertical line in html" questions I have searched in Stack Overflow, I would like to place a vertical line between two linked images from the server of my wikia to my wikia profile ( {{name-of-the-image}} ), with the contraint that I cannot assemble HTML "div" with CSS, or Java with HTML and CSS because CSS appears as plain text inside tabber, which is the built-in extension in wikia which I am using.

Story so far:

<div style="border-right:thin solid #FE2E2E: float:right;">
[[Image]]
</div>
[[Image]]

http://imgur.com/idOfmJX

<div style="border-right:thin solid #FE2E2E;">
[[Image]]
</div>
[[Image]]

The line is still too much to the right, but now the height is perfect. http://imgur.com/WmpZ3S4

After changing "border-right" to "align-center" the line completely disappeared.

At this point I searched for the answer in Stack Overflow and tried other things.

[[Image]]
<td style="border-right:1px solid #FE2E2E;padding 5px;" 
[[Image]]
</td>

imgur.com/sz0vo3H

<div style="border-right:thin solid #FE2E2E: float:right;">
[[Image]]
</div>
<td style="border-right:1px solid #FE2E2E;padding 5px;" 
[[Image]]
</td>

imgur.com/5lDy1Eu

<div class="wrapper">
<div>
[[Image]]
</div>
<div class="leftBorder">
[[Image]]
</div>
<div class="clear">
<div>
[[Image]]
</div>
<div class="leftBorder">
[[Image]]
</div>

Line doesn't appear: imgur.com/Fc5VxuY

<hr class="vertical"/>

Line is horizontal: imgur.com/zHpoEp3

Hr with anything CSS invariably results in plain text: imgur.com/UZl1UOO

<hr style="transform: rotate(90deg);" />

Makes a neat and centered line but above the images and no matter where I put the code, I haven't managed to put one the left and one on the right of it: imgur.com/wvCO2Xc

 <hr style="width:0.5px;height:500px;"/>

and:

<hr width="1" size="400">

both add a fixed centered line: imgur.com/a/AdkuL

In conclusion, I would like the short red line I obtained with

<div style="border-right:thin solid #FE2E2E;">
[[Image]]
</div>
[[Image]]

to be at the center between one image and the other.

Here you can find the gallery of screenshots apart from the first two: imgur.com/a/3JoXx Thank you in advance.

@zgood reminded me of the padding.

{{image on the left}}
<div style="border-left:thin solid #FE2E2E; padding-left:450px;">
{{image on the right}}
</div>

imgur.com/a/cyO7Y