Line between columns

[OldTownToastmasters]

Hi!

I have attempted to place a thin line between two columns. The searches I have done and the solutions I have tried have been ineffective. The attached image below are a screen shot of what the page looks like now and how I want it appear.

The actual Web page is here: http://http://oldtowntoastmasters.org/about/membership-dues/

Will you devise me code that I can use to obtain the results I seek? The code I am using to create the columns is below:

*[column type="one-half" last="false"]*

*<h5>Current Members Only:</h5>*

• *<strong>$120 Annual</strong> – due by September 30 <strong>...or...</strong>*

• *<strong>$60 Semi-Annual</strong> – due by September 30*

• *<strong>$60 Semi-Annual</strong> – due by March 31*

*<a href="https://PayPal.com"><img class="size-full wp-image-1152 aligncenter" src="http://oldtowntoastmasters.org/wp-content/uploads/2020/03/New-Members-Pay-Dues-PayPal-button.png" alt="" width="200" height="50" /></a>*

*[/column]*

*[column type="one-half" last="true"]*

*<h5>New Member Dues:</h5>*

*New members pay a prorated amount to cover the current semi-annual period. <strong>Check with the club's Treasurer for the amount that you will need to pay.</strong>*

*<a href="https://PayPal.com"><img class="size-full wp-image-1151 aligncenter" src="http://oldtowntoastmasters.org/wp-content/uploads/2020/03/Current-Members-Pay-Dues-PayPal-button.png" alt="" width="200" height="50" /></a>*

*[/column]*

[jade]

Hello @OldTownToastmasters,

You may assign a class to the first column then use that class to add the border by CSS.

For example: [column class="with-right-separator" type="one-half" last="false"]

Then the CSS code should be like this:

@media (min-width: 768px) {
    .with-right-separator {
        position: relative;
    }

    .with-right-separator::before {
        content: '';
        width: 2px;
        height: 160px;
        background-color: #ccc;

       position: absolute;
       right: 0;
       top: calc(50% - 80px);
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[OldTownToastmasters]

I hope it works as well! ;->

Forgive me, I am not a programmer. I have enough understanding for me piece code together and whittle it until I get the result I am seeking. Where do I place the CSS code?

[jade]

Hello @OldTownToastmasters,

My apologies for not including it. Please add the code in X > Theme Options > CSS:

Hope this helps.

[OldTownToastmasters]

PERFECT! Almost… I just need to move it a few pixels to left.

[ruenel]

You’re welcome!
We’re glad @Jade were able to help you out.