CodePen

HTML

            
              <div>
  <img src="http://lorempixel.com/300/200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate neque non sem hendrerit lacinia. Aenean eu eros ac leo sollicitudin bibendum. Sed ut nisi nec ante pretium mattis. Maecenas volutpat hendrerit elit. Duis id ullamcorper erat. Mauris non rutrum nisi. Praesent tempor suscipit dolor nec lacinia. In a orci varius velit adipiscing sollicitudin eget vitae felis. Fusce id augue lectus. Vestibulum ut aliquam nisi. Donec egestas tincidunt magna, vel posuere nisi ultrices eu. Duis euismod interdum tincidunt. Fusce at nulla nisi, at scelerisque mauris. Praesent eu adipiscing augue. </p>
  
</div>
            
          
!
via HTML Inspector

CSS

            
              div {
  margin: 2em auto;
  width: 500px;
}

p, img {
  display: block; 
}

img {
  width: 100%;
}

@media ( min-width:500px ) {
   img {
      width: 50%;
      float: right;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................