Apostrophe CMS align custom layout widget

I'm sure there's a really simple solution to this but I can't seem to find it, and I haven't found the question asked here already.

I'm trying to align a layout widget (area) so that when another widget is added it appears to the right of the first widget and not below.

I was hoping i could sort this with flexbox and the artistContainer class but it doesn't seem to be possible.

Dev tools and desired outcome

home.html

<section class="bodysect--dark" id="artists">
    <h2 class="body__heading">Artists</h2>
    <div class="artistContainer">
        {{
          apos.area(data.page, 'artist', {
            widgets: {
              artist: {}
            }
          })
        }}
    </div>
</section>

Widget.html

    <div class="artist">
    <div class="artistImage">
        {{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
    <div class="artistName">
        {{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
             }
        }) }}
    </div>
    <div class="artistBio">
        {{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
            }
        }) }}
    </div>
</div>

widget index.js

module.exports = {        
  extend: 'apostrophe-widgets',        
  label: 'Artist',        
  contextualOnly: true,
  addFields: [
    {
      name: 'artistImage',
      type: 'singleton',
      label: 'Image Area',
      required: true
    },
    {
      name: 'artistName',
      type: 'singleton',
      label: 'Name Area',
      required: true
    },
    {
      name: 'artistBio',
      type: 'singleton',
      label: 'Bio Area',
      required: true
    },
  ]        
};

Thanks in advance!

Solution

There is nothing preventing you from lining up horizontally, however, to maintain the proper flex contexts, you'll need to apply styles to apostrophe-generated markup instead of just your project level classes. Here is some sample code I just demo'd

.horizontal-area {
  .apos-area-widgets, // proper context for logged-in user
  .apos-area { // proper context for logged-out user
    display: flex;
  }

  .apos-area-widget-wrapper {
    flex-grow: 1;
    flex-basis: 0;
  }
}

http://g.recordit.co/IlOPYKRUo0.gif

You might want to provide additional UI changes to adjust the horizontal Add Content line within the horizontal area scope.