Allright @rngu ! So here’s how I made it using the Row widget (like @Waldo pointed out) and some divs. I will spell out all classes i used for this. You can of course use your own class names. 
-
Drag in a Section (if want your whole timeline inside just one section, drag in a Div instead!). Name it Timeline Wrapper. Set background color.
-
Drag in a Container and call it Timeline Container. Set text alignment to “center”.
-
Drag in a H1 and give it a class. Style it with bottom border and bottom padding of 10-15px.
-
Drag in a Div inside Timeline Container and name it Timeline
-
Inside Timeline Container, drag in a Row Widget. Name it Timeline Row. Set it to position: relative.
-
Give each column a name of Timeline Left Column and Timeline Right Column. Set it to position: relative. Style the right column width a left border of 5px
-
In each column, drag in a Div and call them Timeline Left Box respectively Timeline Right Box. Set it to position: relative.
-
Inside Timeline Left Box and Timeline Right Box, drag in a div in each of them and call it Timeline Left Content and Timeline Right Content. Set each side that faces the timeline bar with a 30px margin. Set full padding to 20px and give them a background color. Set the Timeline Right Content with a top padding of 40% and the Timeline Left Content with a top padding of 20%.
-
Add a heading and a paragraph text inside the Timeline Right/Left Content.
-
Inside Timeline Left Box and Timeline Right Box, add a Div. Call it Left Triangle and Right Triangle respectively. They need to be above Timeline Right/Left Content in order. Rotate each div 45°. Set them to position absolute, give them the same background color as the Timeline Right/Left Content and align the so they make the appearance of triangle (they are placed underneath Timeline Left/Right Content and are just sticking out a bit).
-
Inside Timeline Right/Left Content, add a div in each of them and place it between the Heading and Paragraph. Name them separately; in this case it’s Timeline Mini Circle Left and Timeline Mini Circle Right. Give them a full padding of 10px, a 3px border, 50% border radius, display inline block and a background color same as the main Timeline Wrapper . Give it position: absolute. Align them accordingly to the triangles you created in step 10.
-
Go back to Timeline Wrapper. Add a text element and name it Timeline Year. Type in the year (“2012”). Set it to display inline block, 50% border radius and give it a full padding. You need to adjust the top/bottom padding so it creates a nice, even circle. Add a background color and finally set it to position absolute. Align it so its centered on the Timeline Bar.
Voilá!. Done!
Now, this is built with two boxes that contains the heading and text, but in your example the second year (2014) contains four boxes. To replicate that you’ll just:
- Duplicate Timeline Holder (then change the year to "2014 in that circle).
- Duplicate the Timeline Left Box and Timeline Right Box inside the Timeline Left Column and Timeline Right Column respetively so that you have two _Timeline Left Bo_x and two Timeline Right Box. Then you need to add a sub class (I call them Second Left Content and Second Right Content) to each of these to alter the top padding percentage. Decrease it to maybe 10% from the default 40%/20% you added earlier.
This is just optimized for desktop mode so you need to adjust all position: absolute percentage values on the tablet and phone versions so they align correctly.
I haven’t written out all percentage numbers for positioning etc. But you’ll find everything here:
Read-only: https://preview.webflow.com/preview/spsandbox?preview=54211902c42273cc0559dbb81dc8610e
Preview: http://spsandbox.webflow.io/
You probably do all of this with Flexbox too if you want to go the more advanced route but that’s whole another story…
Feel free to ask question (or pick on me if I screwed up) 
