Fill out "About Yoga", "Laying out a Yoga tree" , and "Styling" (#1591)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1591

Adds initial documentation to these sections.

Reviewed By: joevilches

Differential Revision: D54708141

fbshipit-source-id: b2c1ac20573840833a3e5fde8c7b53f2770cecbd

website-next/docs/styling/width-height.mdx

@@ -0,0 +1,36 @@
+---
+sidebar_position: 14
+---
+
+import Playground from '@site/src/components/Playground';
+
+# Width and Height
+
+The `width` property specifies the width of the node's border box (the collective size of the node's content, padding, and border).
+Similarly `height` property specifies the height of the node's border box.
+
+Both `width` and `height` can take following values:
+
+**Auto**: The default Value, Yoga calculates the width/height for the node based
+on its content, whether that is other children, text, or an image.
+
+**Pixels**: Defines the width/height in absolute pixels. Depending on other properties set on
+the Yoga node this may or may not be the final dimension of the node.
+
+**Percentage**: Defines the width or height in percentage of its [containing block's](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) width or height respectively.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 200,
+      height: 200,
+      padding: 10
+    }}>
+    <Node
+      style={{
+        margin: 5,
+        height: 50,
+        width: 50,
+      }}/>
+  </Node>
+</Layout>`} />