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:
Picture1

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 {
color:blue;
}
.enchantment-link:hover, tw-link:hover {
 color: red;
}

tw-sidebar {
	display: none;
}

/* Below are the BGI Tags */

tw-story[tags~="Room"] {
 background-image:url("https://wallpapercave.com/wp/wp6183056.png");
 background-size:cover;
 background-repeat:no-repeat;
 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="https://i.postimg.cc/Y9jfjPy2/fb1.png" alt="Phone" style="width:100%">
  </div>
  <div class="rightcolumn">
    <img src="https://i.postimg.cc/G2NPDjZF/fb2.png" alt="Post" style="width:100%">
  </div>
  
  (align:"==>")+(box:"=========XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=")[[Continue]]

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!