Code for having 2 images side-by-side in a passage

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: Twine 2.3.14
Story Format: Harlowe

Hi, I’m trying to make my passage look like this:

Using some CSS codes I found in the old forum:

tw-passage {
  text-align: center; 
  color: black;
  margin: auto;
  padding: auto;
    background-color: #ffffff;
    opacity: .90;
    filter: alpha(opacity=80);

tw-link {
.enchantment-link:hover, tw-link:hover {
 color: red;

tw-sidebar {
	display: none;

/* Below are the BGI Tags */

tw-story[tags~="Room"] {
 background-position:center center;
 background-attachment: fixed;

/* CSS for side by side  */

.leftcolumn {
	float: left;
  	width: 40%;
  	margin-right: 20%;

.rightcolumn {
 	margin-left: 60%; 

Passage codes:

 This is what your feed looks like...
 <div class="leftcolumn">
    <img src="" alt="Phone" style="width:100%">
  <div class="rightcolumn">
    <img src="" alt="Post" style="width:100%">

But when I apply and preview my passage, it looks like this:

What should be changed in the code or are there any suggestions so I can produce the lay out similar to the 1st image?

Thank you!