You just need to add flexbox layout to the parent of the two columns in the row..sidebarcontainer { display: flex; }
The default direction is row so the text is placed right aligned to each other. I have added a few more edits and additions for snippet styling.
.imagecards {
width: 600px;
height: 900px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
}
.sidebarcontainer img {
height: 250px;
width: 250px;
padding: 10px;
margin: 20px 30px 0 0;
object-fit: contain;
align-self: flex-start;
}
.sidebarcontainer1 {
padding: 10px;
background-color: rgb(228, 228, 228);
}
.sidebarcontainer1 img {
height: 250px;
width: 250px;
}
.sidebarcontainer_text {
flex: 1 1 auto;
align-items: left;
text-align: left;
}
.sidebarcontainer {
display: flex;
align-items: center;
}
<div class="imagecards">
<div class="sidebarcontainer">
<img src="https://picsum.photos/200/300?grayscale">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="https://picsum.photos/200/300?grayscale">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="https://picsum.photos/200/300?grayscale">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
</div>
Use display: flex for the containers as well:
/*QuickReset*/ * {margin:0; box-sizing: border-box; }
.imagecards {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
width: 540px;
}
.sidebarcontainer {
border: 1px solid #444;
padding: 20px;
display: flex;
flex-flow: row;
align-items: center;
}
.sidebarcontainer img {
width: 250px;
min-height: 250px;
object-fit: cover;
}
.sidebarcontainer_text {
padding: 0 20px;
flex: 1 1 auto;
}
.sidebarcontainer_text h1 {
padding-bottom: 20px;
}
<div class="imagecards">
<div class="sidebarcontainer">
<img src="http://placekitten.com/400/300">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="http://placekitten.com/300/300">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="http://placekitten.com/450/300">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
</div>
I am a HTML/CSS newbie looking for some advice on how to create a 3-row single column layout with images and text right next to each other. I tried creating a separate code for just the text column using the flexbox model and that worked in a way but I am still having trouble aligning them and getting them to look right. Wondering if anyone else can suggest a better way to create a sidebar column with images and text right next to each other? Here is what I have so far.
.imagecards {
width: 450px;
height: 900px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
}
.sidebarcontainer img {
height: 250px;
width: 250px;
padding: 10px;
margin: 20px 30px 0 0;
object-fit: contain;
align-self: flex-start;
}
.sidebarcontainer1 {
padding: 10px;
background-color: rgb(228, 228, 228);
}
.sidebarcontainer1 img {
height: 250px;
width: 250px;
}
`.sidebarcontainer_text` {
flex: 1 1 auto;
align-items: left;
text-align: left;
}
<div class="imagecards">
<div class="sidebarcontainer">
<img src="resources/images/information-orientation.jpg">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="resources/images/information-orientation.jpg">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
<div class="sidebarcontainer">
<img src="resources/images/information-orientation.jpg">
<div class="sidebarcontainer_text">
<h1>Fisma: Design and Prototype</h1>
<p>Designer Showcase of new Prototype Product</p>
</div>
</div>
</div>
Hi Roko, Thanks for letting me know. I’ll add it now
