Select maximum of two options to display summary info cards

Question

I am trying to devise a mechanism whereby a user can select only two options at a time in order to display summary information for their selections.

It looks like this at present (actual content cannot be disclosed for confidentiality reasons):

So, by default, the first two 'items' are selected. The checkboxes for the rest of the items are disabled (although this is not very visually clear with the Axure widget I've used). To select a different item, the user has to first deselect one of the two items. Summary information for the selected items is displayed beneath the selection mechanism in cards (so, in the image, Item 1 and Item 2). The user can then drill down into the item by clicking 'Open'. They can then configure the item on a different screen and, after returning to this screen, the item will then display as 'configured'. Configuration is indicated with the little dots on the cards and on the selection mechanism (grey for not configured, green for configured) and a label:

My problem is, when there are more than 5 items (the most there can be is 9-10), I run out of horizontal space. At the moment, I've used a dropdown menu to display the other items. This is not ideal though, because when you select one of the items in the dropdown menu, you cannot see that it's been selected. As below. If you select Item 6, for example, and close the menu, that selection is hidden. I'm also not so fond of the fact that the user has to deselect an item before they can select another one.

Any suggestions on how to improve this?

Thanks a lot

Answer 1

Do they need to be so wide or just one row? Would it help if it were more like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Alternatively you could have all the items in a drop down?