Is there a way to position this Flex-Box Item beside the image?

Please refer to the image

How do I rearrange this Flex-Box Item to be positioned next to the image?

https://i.sstatic.net/eSy3w.png

 <div class="brif fb">
                <div class="sml-con"><img class="sml-thumb" src="images/chosen/edward.jpg" alt=""></div>
                <h3>The WhiteBeard Pirates</h3>
                <div class="trai"> <i class="fa fa-video-camera mr5"></i> <span>Trailer</span></div>
                <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with his seven-year-old brother to stop the dastardly plot of the CEO of Puppy Co.</p>

CSS

   `.brif { width:69%; flex-wrap: wrap; padding:17px; align-items: flex-
start; /* prevent the children from taking full height */  }

.brif .sml-con { width: 140px; height: 210px;  }

.brif .sml-thumb { width:100%; height:100%; }

.brif h3 { padding: 9px 15px; }

.brif .trai { background:  #0397D6; padding: 5px 9px; border-radius:10px; 
margin:5px 0; }

.brif .trai i{ margin-right:1px; }`
csspositionflexbox

Answer №1

To ensure two elements stay side-by-side, wrap them in a <div class="wrapper"> and add display: flex;, while removing flex-wrap: wrap;.

.brif {
  width: 69%;
  display: flex;
  padding: 17px;
  align-items: flex-start;
  /* prevent the childs from taking full height */
}

.brif .sml-con {
  width: 140px;
  height: 210px;
}

.brif .sml-thumb {
  width: 100%;
  height: 100%;
}

.brif h3 {
  padding: 9px 15px;
}

.brif .trai {
  background: #0397D6;
  padding: 5px 9px;
  border-radius: 10px;
  margin: 5px 0;
}

.brif .trai i {
  margin-right: 1px;
}
<div class="brif fb">
  <div class="sml-con">
    <img class="sml-thumb" src="images/chosen/edward.jpg" alt="">
  </div>
  <div class="wrapper">
    <h3>The WhiteBeard Pirates</h3>
    <div class="trai">
      <i class="fa fa-video-camera mr5"></i>
      <span>Trailer</span>
    </div>
    <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with is seven-year old brother to stop the dastardly plot of the CEO of Puppy Co.</p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered with the item properties in vue-simple-calendar 'classes'

For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expec ...

cssvue.jsnpmcalendar

What could be causing my CSS code to not function properly within Vue.js?

Having trouble with css in VueJs. I can't seem to figure out what I'm doing wrong. Generally, my scoped style css works fine in vuejs, I can target ids and classes without any issues. The problem arises when trying to change the internal css va ...

cssvue.jsquill

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...

javascripthtmlcsstextarea

Access an HTML element and using JavaScript to make changes to it

As a new web developer, I am eager to create a grid of file upload zones on my site. I have decided to use DropZone.js for this project. I have customized DropZone and added multiple drop zones in the HTML. The grid layout consists of four rows with four ...

javascriptjqueryhtmlcssnode.js

Utilizing jQuery to pinpoint the exact position within a Flexbox container

I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...

javascriptjqueryhtmlcss

Arrangement of Div Box

Here is the HTML code that I am currently working with: <div class="item"> <div class="pageheader"> Header </div> <div class="info"> Created on... </div> <div class="image"> I ...

htmlcssposition

Center-align the text in the navigation bar

Is there a way to center the text within my navigation and ensure it remains centered across all resolutions (left at 1920x1080, centered at 1420)? I understand that much of this code is inefficient and not working correctly, but for now I just want to fi ...

htmlcsswordpressnavigation

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...

htmlcss

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

javascriptcssangularjs

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

javascriptjquerycsswordpresswidget

Swap the content of one div with another div using client-side code only

Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files ...

javascriptjqueryhtmlcss

Google/StackExchange Menu Tab

I am interested in creating a navigation bar similar to Google's or StackExchange's new one, where it is always positioned at the top. It does not need to be fixed there, but I would like it to have links only. How can I achieve this layout with ...

htmlcss

Collecting data with Selenium as elements load [Python]

Is there a way to scrape only the newly generated items in sequence? I have a dynamic list that loads with scrolling. There are two methods I can use to scrape all generated divs: Scroll to the bottom of the list and then scrape all generated divs. Scroll ...

pythoncsspython-3.xselenium-webdriverweb-scraping

What is the best method for adding a background image to a jumbotron in my Django project?

I have been struggling with this issue for some time now. Currently, I am working on a Django project and I need to add an image as the background in the jumbotron section. home.html {% extends 'blog/base.html' %} {% load static %} {% bl ...

pythonhtmlcssdjangotwitter-bootstrap

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

Is there a common issue in web browsers? Neglecting the position relative attribute on 'tbody', 'tr', and 'td' elements?

Trying to absolutely position elements within tbody, tr, and td may not work in certain browsers. While it behaves as expected in Firefox, it does not work properly in IE, Edge, and Chrome. If you apply position: relative to tbody, tr, or td, it will be i ...

htmlcsscss-positioncss-tables

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

Uncovering the specific file housing a CSS definition

I'm currently navigating a complex webpage with numerous CSS files that were not authored by me. I am struggling to identify a CSS style that seems elusive, as it is not located in the most obvious places (such as the CSS files) and I have no idea whe ...

htmlcss