Vertical divider: only centered position?

[smartm0use]

About vertical divider I read this:

Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically, and only if not positioned as direct children of flex containers (like grid).

So, how to have a divider that is not centered? Something like this:

Is something that could be reached using grid or is there a better way?

[TheJltres]

Hello,

I think the best implementation for this is border: https://jsfiddle.net/TheJltres/tL8f6kws/4/
If you want to go with only two columns you will have to play with column wide: https://fomantic-ui.com/collections/grid.html#column-widths

Main problem is that you can't have text

[ko2in]

If you want to use divider element within grid. Better add customization inside your divider.overrides. The below CSS will work:

.ui.grid > .column > .ui.divider {
  left: auto;
  right: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

Here's fiddle (https://jsfiddle.net/2hfwdq6k/). You can add divider element within your grid column. You will need additional customization for responsive layouts.

If you just want the bordered only, FUI already support horizontal segments with grid. Here's fiddle (https://jsfiddle.net/d73zs0gk/).

Or you can use custom CSS to apply border as @TheJltres suggested.