diff --git a/app/client/src/editorComponents/ButtonComponent.tsx b/app/client/src/editorComponents/ButtonComponent.tsx
index 0d5abee2c1..f408476c83 100644
--- a/app/client/src/editorComponents/ButtonComponent.tsx
+++ b/app/client/src/editorComponents/ButtonComponent.tsx
@@ -1,10 +1,15 @@
 import * as React from "react"
 import { Button, MaybeElement } from "@blueprintjs/core"
-import { ITextComponentProps } from "./TextComponent";
+import { ITextComponentProps } from "./TextComponent"
+import PositionContainer from "./PositionContainer"
 
 class ButtomComponent extends React.Component<IButtonComponentProps> {
   render() {
-    return <Button text={this.props.text} icon={this.props.icon} />
+    return (
+      <PositionContainer {...this.props}>
+        <Button text={this.props.text} icon={this.props.icon} />
+      </PositionContainer>
+    )
   }
 }
 
diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx
index 8f6ee48002..983ef4b5da 100644
--- a/app/client/src/editorComponents/ContainerComponent.tsx
+++ b/app/client/src/editorComponents/ContainerComponent.tsx
@@ -4,6 +4,8 @@ import styled from "../constants/DefaultTheme"
 import React from "react"
 
 const Container = styled("div")<IContainerProps>`
+  display: "flex"
+  flexDirection: ${(props) => { return props.orientation === "HORIZONTAL" ? "row" : "column" }};
   background: ${props => props.theme.secondaryColor};
   color: ${props => props.theme.primaryColor};
   position: ${props => props.style.positionType};
diff --git a/app/client/src/mockResponses/CanvasResponse.tsx b/app/client/src/mockResponses/CanvasResponse.tsx
index 82ff15894d..ca41dd3a26 100644
--- a/app/client/src/mockResponses/CanvasResponse.tsx
+++ b/app/client/src/mockResponses/CanvasResponse.tsx
@@ -32,7 +32,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       widgetId: "1",
       widgetType: "BUTTON_WIDGET",
       topRow: 2,
-      leftColumn: 7,
+      leftColumn: 4,
       bottomRow: 5,
       rightColumn: 5,
       text: "Lorem Ipsum",
diff --git a/app/client/src/mockResponses/WidgetPaneResponse.tsx b/app/client/src/mockResponses/WidgetPaneResponse.tsx
index 7266c7e298..574f0524a1 100644
--- a/app/client/src/mockResponses/WidgetPaneResponse.tsx
+++ b/app/client/src/mockResponses/WidgetPaneResponse.tsx
@@ -1,15 +1,28 @@
-import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer";
-import { RenderModes } from "../constants/WidgetConstants";
+import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer"
+import { RenderModes } from "../constants/WidgetConstants"
 
 const WidgetPaneResponse: WidgetPaneReduxState = {
-    widgets: [
-      {
-        widgetId: "1",
-        widgetType: "BUTTON_WIDGET",
-        text: "Lorem Ipsum",
-        renderMode: RenderModes.COMPONENT_PANE
-      }
-    ]
+  widgets: [
+    {
+      widgetType: "BUTTON_WIDGET",
+      text: "Lorem Ipsum",
+      renderMode: RenderModes.COMPONENT_PANE
+    },
+    {
+      widgetType: "TEXT_WIDGET",
+      text: "Lorem Ipsum",
+      renderMode: RenderModes.COMPONENT_PANE
+    },
+    {
+      widgetType: "SPINNER_WIDGET",
+      renderMode: RenderModes.COMPONENT_PANE,
+      backgroundColor: "#434343",
+      topRow: 2,
+      leftColumn: 5,
+      bottomRow: 5,
+      rightColumn: 5
+    }
+  ]
 }
 
-export default WidgetPaneResponse
\ No newline at end of file
+export default WidgetPaneResponse
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index 95296362d2..fcbb4ae211 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -6,9 +6,11 @@
 import {
   WidgetType,
   RenderMode,
-  RenderModes
+  RenderModes,
+  CSSUnits
 } from "../constants/WidgetConstants"
 import { Component } from "react"
+import { BaseStyle } from "../editorComponents/BaseComponent";
 
 abstract class BaseWidget<
   T extends IWidgetProps,
@@ -79,6 +81,17 @@ abstract class BaseWidget<
   }
 
   abstract getWidgetType(): WidgetType
+
+  getPositionStyle(): BaseStyle {
+    return {
+      positionType: this.props.renderMode === RenderModes.COMPONENT_PANE ? "CONTAINER_DIRECTION" : "ABSOLUTE",
+      yPosition: this.props.topRow * this.props.parentRowSpace,
+      xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+      xPositionUnit: CSSUnits.PIXEL,
+      yPositionUnit: CSSUnits.PIXEL
+    }
+  }
+
 }
 
 export interface IWidgetState {
diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx
index 8e81e750d4..a337f7f8d6 100644
--- a/app/client/src/widgets/ButtonWidget.tsx
+++ b/app/client/src/widgets/ButtonWidget.tsx
@@ -13,13 +13,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
   getPageView() {
     return (
       <ButtonComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         text={this.props.text}
diff --git a/app/client/src/widgets/CalloutWidget.tsx b/app/client/src/widgets/CalloutWidget.tsx
index f617435cb5..6e4314ab96 100644
--- a/app/client/src/widgets/CalloutWidget.tsx
+++ b/app/client/src/widgets/CalloutWidget.tsx
@@ -13,13 +13,8 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
   getPageView() {
     return (
       <CalloutComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        
+      style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         id={this.props.id}
diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx
index 15f82b6a67..86f5cbcdb0 100644
--- a/app/client/src/widgets/ContainerWidget.tsx
+++ b/app/client/src/widgets/ContainerWidget.tsx
@@ -52,13 +52,9 @@ class ContainerWidget extends BaseWidget<
       <ContainerComponent
         widgetId={this.props.widgetId}
         style={{
+          ...this.getPositionStyle(),
           height: this.state.height,
-          width: this.state.width,
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
+          width: this.state.width
         }}
         snapColumnSpace={this.snapColumnSpace}
         snapRowSpace={this.snapRowSpace}
diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx
index 022dd13815..08f37f8db2 100644
--- a/app/client/src/widgets/IconWidget.tsx
+++ b/app/client/src/widgets/IconWidget.tsx
@@ -14,13 +14,7 @@ class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
   getPageView() {
     return (
       <IconComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         icon={this.props.icon}
diff --git a/app/client/src/widgets/InputGroupWidget.tsx b/app/client/src/widgets/InputGroupWidget.tsx
index 11ca4d8425..876ff89edd 100644
--- a/app/client/src/widgets/InputGroupWidget.tsx
+++ b/app/client/src/widgets/InputGroupWidget.tsx
@@ -16,13 +16,7 @@ class InputGroupWidget extends BaseWidget<
   getPageView() {
     return (
       <InputGroupComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         className={this.props.className}
diff --git a/app/client/src/widgets/SpinnerWidget.tsx b/app/client/src/widgets/SpinnerWidget.tsx
index 30b681cf06..27638146f4 100644
--- a/app/client/src/widgets/SpinnerWidget.tsx
+++ b/app/client/src/widgets/SpinnerWidget.tsx
@@ -13,13 +13,7 @@ class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
   getPageView() {
     return (
       <SpinnerComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         size={this.props.size}
diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx
index a2b7ea13f8..43556732f9 100644
--- a/app/client/src/widgets/TextWidget.tsx
+++ b/app/client/src/widgets/TextWidget.tsx
@@ -12,13 +12,7 @@ class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
   getPageView() {
     return (
       <TextComponent
-        style={{
-          positionType: "ABSOLUTE",
-          yPosition: this.props.topRow * this.props.parentRowSpace,
-          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
-          xPositionUnit: CSSUnits.PIXEL,
-          yPositionUnit: CSSUnits.PIXEL
-        }}
+        style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         text={this.props.text}