Swizec/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
 #body {
   min-height: 100%;
   background: beige;
   width: 100%;
}

#main {
   display: -webkit-flexbox;
   width: 100%;
   height: 100%;
}

#main div {
    flex-pack: center;
    flex: 1;
    border: 8px solid pink;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 6px;
    margin: 4px;
    transition: all 0.3s ease-in-out;
}

#main div:nth-child(2) {
    flex: 2;
}

#main div img {
    width: 100%;
    max-width: 700px;
}

#main div:last-child {
    margin-right: 0;
}

@media all and (orientation: portrait) {
    #main {
         flex-direction: column-reverse;
    }
}

@media all and (orientation: landscape) {
   #main {
       flex-direction: row;
   }
   #main div {
      border-color: green;
   }
}

@media handheld {
   #media div {
       border: 0;
       padding: 2px;
       background: grey;
       color: purple;
   }
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div id="main">
  <div>I am the left one</div>
  <div><img src="http://www.stfc.ac.uk/resources/image/RosDustLge.jpg" /></div>
  <div>this is the right one</div>
</div>

## settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/
	#body {
	min-height: 100%;
	background: beige;
	width: 100%;
	}

	#main {
	display: -webkit-flexbox;
	width: 100%;
	height: 100%;
	}

	#main div {
	flex-pack: center;
	flex: 1;
	border: 8px solid pink;
	box-sizing: border-box;
	border-radius: 12px;
	padding: 6px;
	margin: 4px;
	transition: all 0.3s ease-in-out;
	}

	#main div:nth-child(2) {
	flex: 2;
	}

	#main div img {
	width: 100%;
	max-width: 700px;
	}

	#main div:last-child {
	margin-right: 0;
	}

	@media all and (orientation: portrait) {
	#main {
	flex-direction: column-reverse;
	}
	}

	@media all and (orientation: landscape) {
	#main {
	flex-direction: row;
	}
	#main div {
	border-color: green;
	}
	}

	@media handheld {
	#media div {
	border: 0;
	padding: 2px;
	background: grey;
	color: purple;
	}
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="main">
	<div>I am the left one</div>
	<div><img src="http://www.stfc.ac.uk/resources/image/RosDustLge.jpg" /></div>
	<div>this is the right one</div>
	</div>