Achieving Right Aligned Images with caption in Content

How to include right-aligned images in your content to go with your text without modifying the default content types or using features or custom modules

The Social Base and Social Blue themes lack some classes used by CK Editor to align inline content...
Just sharing how I solved this need, for anyone with a similar need or interest.

Before explaining, here's the result, just in case it's not clear:
A medium picture is embedded inline, aligned to the right of a paragraph, in this case the bio of a person described in the text.
See attached file

Or see it live at http://www.civ.do/team

1. First you need to add your own custom CSS file to the theme.
Under your Open Social root file go to the Social Blue Theme directory.

cd html/profiles/contrib/social/themes/socialblue

Edit socialblue.libraries.yml to have the team look for custom.css.
sudo nano socialblue.libraries.yml

And add assets/css/custom.css: {} under base assets, so that it looks like this:

# The SMACSS category "base" is loaded first.
base:
  css:
    base:
      assets/css/base.css: {}
      assets/css/custom.css: {}

2. Then create custom.css and add the required classes for achieving the desired look:
sudo nano assets/css/custom.css

Inside, paste:

/* ----------------------------------------------
   CSS Alignment Classes used by CKEditor plugins 
   missing from OpenSocial Base and Blue Themes 
   ---------------------------------------------- */

.align-right {
/* copied from bootstrap .pull-right 
   http://getbootstrap.com/css/#helper-classes-floats */
        float: right;
}

.align-left {
/* copied from bootstrap .pull-left 
   http://getbootstrap.com/css/#helper-classes-floats */
        float: left;
}

.align-center {
/* copied from bootstrap .center-block
http://getbootstrap.com/css/#helper-classes-center
*/
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/* ----------------------------------------------
   Alignment of Inline Images and limiting caption
   captions to the width of their images 
   ---------------------------------------------- */

figure.align-right,
figure.align-left { 
        padding: 10px;
        margin: 0px;
        display: table;
}

figure.align-center { 
        padding: 10px;
        display: table;
}

figure.align-right figcaption,
figure.align-left figcaption,
figure.align-center figcaption { 
        font-size: small;
        text-align: center;
        display: table-caption;
        caption-side: bottom ;
        margin-bottom: 5px;
}

Now you can simply embed images, align them and add captions to them using the regular WYSIWYG editor and without having to install or do anything else.

Do note that composer update will override these changes, so you will have to apply them again (changing socialblue.libraries.yml and creating assets/css/custom.css: {}) after an upgrade.

Hope these helps anyone.

PS: I have a copy of these on my personal sandbox notes sites, in case code looks broken here, at
http://www.codigoslibres.com/drupal/opensocial

PS: Maintainers are free to add this to any knowledge base and modify it if desired. I'd also be happy to provide a more detailed description if required to post it where it can help others.