Place two images side by side - css

Question

I am trying to place two images side by side. I want them to be full width and responsive. However, I can't figure out how to get them on the same line. Does anyone have solutions? Here is a fiddle - https://jsfiddle.net/0je558ex/
<div class="food-featured-posts">
<div class="food-featured-posts-first">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
</div>
<div class="food-featured-posts-second">
<img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
</div>
</div>
food-featured-posts {
width: 100%;
margin-bottom: 100px;
}
.food-featured-posts-first img {
width: 50%;
height: 50%;
display:inline-block
}
.food-featured-posts-second img {
width: 50%;
height: 50%;
display:inline-block
}

Answer 1

You have two problems actually.
First, you're setting the styling of the img, but the div which wraps them are implicitly styled to basically be: display:block;width:100%;.
Simply remove the divs.
Second, and slightly more interestingly, your img elements still will not render next to each other at 50% because any whitespace between two display:inline-block elements means that the total size is greater than 100%, so the second element is kicked to the second line.
You therefore need to put the img tags on the same line—frustrating, I know.
See this question: CSS two div width 50% in one line with line break in file
<div class="food-featured-posts">
<!-- Note these are on the same line -->
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ ><img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
</div>
food-featured-posts {
width: 100%;
margin-bottom: 100px;
}
.food-featured-posts img {
width: 50%;
display:inline-block;
}

Answer 2

Set the divs that wrap the image to width: 50%; display: inline-block; and set the img tags to width: 100%; so they will take up the entire div, then remove the space between the inline-block div elements in your HTML since spaces on inline elements take up space and the space will exceed 100% width (since each div takes up 50%).
img {
width: 100%;
}
.food-featured-posts > div {
width: 50%;
display: inline-block;
}
<div class="food-featured-posts">
<div class="food-featured-posts-first">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
</div><div class="food-featured-posts-second">
<img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
</div>
</div>