image and textbox align with each other - html

Question

I am trying to create an event list with image on the left hand side, and text box on the right hand side describing it (similar to evenbrite). However, I am having the following issues:
creating a box for the text
align the image with the box
change the padding, margin of the text so that it fits inside the box.
Thank you!
html:
<img src="bionic.jpg" alt="festo bionic" class="events">
<div class="event_description">
<p> Robotics Demo </p>
<p> All Day on October 4th, 2018. R:Lab, Emirates Tower</p>
<p> Join us in interacting with the most technologically advanced robots. </p>
</div>
css:
body {
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
}
h1 {
color: rgb(65, 56, 50);
font-size: 6em;
padding: 0px;
}
h2 {
color: rgb(61, 23, 30);
font-size: 3em;
}
img {
height: 350px;
}
p {
color: rgb(61, 23, 30);
padding: 30px;
font-size: 1.5em;
}
.events {
float:left;
height:200px;
width: 200px;
margin: 20px;
}
.event_description {
display:inline-block;
font-size: 1.0em;
float:right;
margin: auto;
padding: 0px;
border:5px lightgray;
}

Answer 1

Is this what you want? I have made the width of event_description
width: calc(100% - 240px);
This will align the description next to image
How this works
width: calc(100% - 240px);
240px is sum of width of the image and the margin applied to the image
You are subtracting 240px from the width of the parent.
body {
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
}
h1 {
color: rgb(65, 56, 50);
font-size: 6em;
padding: 0px;
}
h2 {
color: rgb(61, 23, 30);
font-size: 3em;
}
img {
height: 350px;
}
p {
color: rgb(61, 23, 30);
padding: 30px;
font-size: 1.5em;
}
.events {
float: left;
height: 200px;
width: 200px;
margin: 20px;
}
.event_description {
width: calc(100% - 240px);
display: inline-block;
font-size: 1.0em;
float: right;
margin: auto;
padding: 0px;
border: 5px lightgray;
}
<img src="https://placehold.it/100x100" alt="festo bionic" class="events">
<div class="event_description">
<p> Robotics Demo </p>
<p> All Day on October 4th, 2018. R:Lab, Emirates Tower</p>
<p> Join us in interacting with the most technologically advanced robots. </p>
</div>

Answer 2

See if that's what you want.
I created an element <div class="content"></div> which will be the parent of the elements, and set the following property: display: flex;.
To set the border of .events_description the added solid
.content {
display: flex;
}
p {
color: rgb(61, 23, 30);
}
.events {
height:200px;
width: 200px;
margin-right: 30px;
}
.event_description {
flex-wrap:wrap;
display:inline-block;
font-size: 16px;
padding: 0px 15px 0 0;
border:5px solid lightgray;
}
p {
margin: 0;
}
<div class="content">
<img src="https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed1.jpg" alt="festo bionic" class="events">
<div class="event_description">
<p> Robotics Demo </p>
<p> All Day on October 4th, 2018. R:Lab, Emirates Tower</p>
<p> Join us in interacting with the most technologically advanced robots. </p>
</div>
</div>