images side by side in div

Hello! I have been using the code from here but ever since I needed to wrap my images in a div, it doesn’t work even though I changed the selector to images. Had to wrap images in a div to style it to have different width from the text.

This is what I have in my functions to wrap my images in a div:

<?php

function breezer_addDivToImage( $content ) {

   // A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
   // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $replacement = '<div class="image">$1</div>';

   // run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

   // return the processed content
   return $content;
}

add_filter( 'the_content', 'breezer_addDivToImage' );

?>

And this is the CSS regarding it:

#image {
    	margin: 0px auto 24px !important;
    	float: left !important;
	display: block;
}
#image:after { clear: both; }
#image:before, .halfeach:after { content: ""; display: table; }
p #image img { width: 49%; margin: 0; }
p #image a:first-child img { float: left; }
p #image a:last-child img { float: right; }

I have an example post here.