diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js
index 797f2bec1163..5e3ee3c84e90 100755
--- a/lib/core/GridBlock.js
+++ b/lib/core/GridBlock.js
@@ -16,11 +16,13 @@ class GridBlock extends React.Component {
       alignCenter: this.props.align === 'center',
       alignRight: this.props.align === 'right',
       fourByGridBlock: this.props.layout === 'fourColumn',
-      imageAlignBottom: block.image && block.imageAlign === 'bottom',
       imageAlignSide:
         block.image &&
         (block.imageAlign === 'left' || block.imageAlign === 'right'),
       imageAlignTop: block.image && block.imageAlign === 'top',
+      imageAlignRight: block.image && block.imageAlign === 'right',
+      imageAlignBottom: block.image && block.imageAlign === 'bottom',
+      imageAlignLeft: block.image && block.imageAlign === 'left',
       threeByGridBlock: this.props.layout === 'threeColumn',
       twoByGridBlock: this.props.layout === 'twoColumn',
     });
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 1c25be0bf649..a4ddc1946b6a 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -795,7 +795,6 @@ pre code {
 .imageAlignSide .blockImage {
   max-width: 500px;
   flex: 0 1 500px;
-  margin-right: 40px;
 }
 @media only screen and (min-device-width: 360px) and (max-device-width: 735px) {
   .imageAlignSide .blockImage {
@@ -821,6 +820,12 @@ pre code {
   margin-left: auto;
   margin-right: auto;
 }
+.imageAlignRight .blockImage {
+  margin-left: 40px;
+}
+.imageAlignLeft .blockImage {
+  margin-right: 40px;
+}
 .container .gridBlock .blockContent p {
   padding: 0;
 }