Align in same row - html

Question

How to align the below image and box in same row? Image on left and box on right with some space between them.
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="bafdf1f214f5a800c95ef301234c254a.iix"/>
</div>
<div id="newsbox">
<span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>

Answer 1

Like #ntgCleaner said: "there's about 20 ways to skin that cat."
This might be one way to achieve this:
#slideshow {
display: flex;
}
.group-box {
margin-top: 50px;
}
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="//thumb7.shutterstock.com/display_pic_with_logo/260389/347420135/stock-photo-top-view-of-architect-drawing-on-architectural-project-347420135.jpg"/>
</div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>

Answer 2

You can use "float" or "display: inline-block" css selectors to set your elements this way. I belive this simple example will help:
<style>
#slideshow{
border: 1px solid black;
width: 100%;
}
#changeimage{
float: left;
background: blue;
width: 40%;
}
#newsbox{
float: left;
background: red;
width: 40%;
}
#separator {
width: 20%;
height: 100px;
float: left;
background: green;
}
.clear{
clear: both;
}
</style>
<div id="slideshow" >
<div id="changeimage"><img class="image" src="http://www.w3schools.com/html/pic_mountain.jpg"/></div>
<div id="separator"></div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
And here is working example:
https://jsfiddle.net/ej53b8x2/
If you want to set elements in row maybe you should use some framework like bootstrap or foundation?