• First, ensure you have a design available and all necessary resources before starting to build sample with the WP Bakery Builder.

Note: You can use https://source.unsplash.com/featured/693x223 to generate image and update to the design.

• Let us insert `Row` element to wrap four columns should have a ratio of 1/2, 1/6, 1/6, and 1/6.

• With the help of WP Bakery page builder, you can reference layout as below upon use elements such as `Row`, `Icon`, 'Custom Heading`, `Separator`.

In some cases, the line at the between two columns will be a challenge and you can reference `Separator` element as temporary element to adjust height.

• With CSS style, we will focus on `Row` element by adding extra class named `contact-us-detail`.

.contact-us-detail > .section-container {
    width: auto;
    width: 100%;
    max-width: inherit;
    background: #012745;
}

The next, to draw border right and not full height with column. We need to pay attention to `.wpb_wrapper`. That means, you need to add `border-box` into `Inner Column Settings`.

.border-box > .vc_column-inner > .wpb_wrapper {
    border-right-width: 2px;
    border-right-color: #677D8F;
    border-right-style: solid;
    margin-right: -15px;
}

In some cases, we need add extra class in first `Inner Column` to set up minimum of height.

.col-box {
    height: 223px;
}

We still have `Separator` element. You can add extra class named `bottom-line-box`. Use `margin-bottom` to modify height of border right if content between columns is not consistent about height.

.bottom-line-box > .vc_sep_holder {
    margin-bottom: 12px;
}