Display several sequences of events with possible line break in middle

I am a HTML / CSS newbie.

I need to do something like this:

My web page is receiving sequences of events dynamically and I would like to visualize them on in the page.

I would like one sequence of events to be in a box, with lots of slots, and each slot has the event id.

So if I have several sequences, then I will have several such boxes.

However, the length of a sequence is dynamic. And the web page's window might be adjusted by the users, so even for a sequence, if it is too long or the window is too narrow, I have to break the box into several lines.

the above is my drawing of the design.

The A, B, etc, are the sequence title, then the numbers are the ids.

ideally, the space of all events / sequences should be as compact as possible.

And if a box has to change line, then it should be half-borded to indicate the continuous.

How can I do that? using CSS 3?

And also the framework I am using is AngularJS to control the data / UI binding, even if I manage to handle this case, how to dynamically bind the data to adjust this requirement?

Thanks