Solving this issue is actually easier than you may imagine. To have multiple elements appear on the same line, it is best to utilize display: inline; or display: inline-block;. Usually, elements are set with display: block;, which creates a new line for each element. However, there are exceptions that can be surprising as not all elements behave this way. For instance, the <span> element does not impact styling unless specific attributes are added. But let's get back to addressing your question.
#im1 {
float: left;
display: inline;
margin: 0px;
}
#text1 {
float: right;
margin: 0px;
display: inline;
}
#im2 {
float: right;
margin: 0px;
display: inline;
}
#text2 {
float: left;
margin: 0px;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<!-- It is recommended to link external css files here or use <style> tags in the document. External files make management easier. Tutorials are available on w3schools-->
<title>title</title>
</head>
<body>
<img id="img1" width="25%" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<span id="text1">Here is the accompanying text</span>
<br><br>
<img id="img2" width="25%" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<span id="text2">Is this additional text?</span>
</body>
</html>
Setting the margin to 0 pixels is unnecessary since we've made them inline elements, but I like to include it just for clarity :). The margin controls the space around an element. Additionally, by floating the elements either left or right, they are pushed in that direction without impacting other elements. Float only has left and right options, and z-indexing can help manage overlapping elements (refer to w3schools for more information).
Remember, everyone starts as a beginner. Keep learning and exploring beyond websites - there's so much more waiting for you to discover!