Untitled

dabblet.css

.first {
   padding: 10px;
   height: 300px;
   margin: 10px 30px 30px 10px;
   background: red;
   box-shadow: 0 0 0 10px gold;
   width: 100px;
   text-align: center;
   float: left
}

.news {
 background: gold;
 border: 2px solid purple;
}

.news img {
 float: left;
}

.news p {
 float: right;
}

.clear {
clear: both;
}

dabblet.html

<div class="news">
<img src="https://fakeimg.pl/100/" alt="my pic" />
<p>Some text</p>
<br class="clear" />
floats take no space as they are taken out of normal document
flow. If we don't use break element with clear "both" the "news" wrapper div will collapse.
Try removing br element and see what happens.
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}