Place Text on top of one another next to an image - html

Question

I have the following html:
<div class="row">
<div col-md-9>
<div>
<img class="img-valign" src="an image">
<span class="text1" Style="font-size: 8pt">Text number 1</span>
<span class="text1" Style="font-size: 8pt">Text number 2</span>
</div>
</div>
<div col-md-3>
</div>
</div>
</div>
Is it possible this way to make text number two below text number 1 but on the right of the image? In this way the second span is going below the image.

Answer 1

You can easily achieve that using flexbox. Bootstrap also has built-in classes for that.
Your HTML structure needs to be changed slightly:
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- justify-content-between makes img and the text list stay left and right -->
<div class="d-flex flex-row justify-content-between">
<img />
<!-- flex-column makes this text list display its children as column -->
<div class="d-flex flex-column">
<span />
<span />
</div>
</div>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/6/
If you want to align the text list and the image to their center as well, just add .align-items-center to the parent flex container:
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- this div is the parent flex container -->
<div class="d-flex flex-row justify-content-between align-items-center">
<img />
<div class="d-flex flex-column">
<span />
<span />
</div>
</div>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/8/

Answer 2

#rightText {
margin-left: 50%;
font-size: 8pt;
}
<div class="row">
<div col-md-9>
<div>
<img class="img-valign" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id ="rightText">
<span class="text1" Style="font-size: 8pt">Text number 1</span>
<br>
<span class="text1" Style="font-size: 8pt">Text number 2</span>
</div>
</div>
</div>
<div col-md-3>
</div>
</div>
</div>