cant apply border img float right : <p>I'm not good in html, css, i want to apply boarder to dev, which contains image in right </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.amount-2 {
    border: 3px solid #4CAF50;
    padding: 5px;
    width: 70%;
    float:left;
}

.sample {
    float: right;
    width: 30%;
    margin-top: -100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="amount-2"&gt;
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.

&lt;img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200"&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I dont want to fix the heights </p>
