Solution 1 :

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>

Solution 2 :

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>

Problem :

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>

Comments

Comment posted by Roko C. Buljan

You forgot to add the CSS code

Comment posted by Esha Nambiar

Hi Roko, Thanks for letting me know. I’ll add it now

Comment posted by Esha Nambiar

Thanks so much!! This helps a lot!

Comment posted by Esha Nambiar

Super helpful! Thanks!!

By

Leave a Reply

Your email address will not be published. Required fields are marked *