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?

 <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

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

javascripthtmlcss

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. W ...

htmlcssdrop-down-menu

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

javascriptjquerycss

Anchor link leading to an incorrect location

Sorry for the potentially silly question, but I'm struggling to figure out what's happening here. I'm currently working on a website and trying to create an anchor link at . I've placed the anchor just before in this code: <a name ...

htmlhyperlinkpositionanchor

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

cssperformancedomcss-selectors

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

htmlcsstwitter-bootstrap

Obtain the computed style by utilizing setTimeout for effective functionality

I want to retrieve the calculated style (background-color) of a span element. Here's my HTML code, consisting of two label elements, each containing an input and a span: <label> <input type="radio" name="numbers" value="01" checked/> ...

javascripthtmlcss

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written: $("#searchInput").on("keyup", function () { var searchTerm = $("#searchInput").val(); $('li:contains("' + searchTerm + ' ...

javascriptjquerycss

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Highcharts' labels on the x-axis do not automatically rotate

One issue I am facing is that my custom x-axis labels on the chart do not rotate upon window resize. I would like to have them rotated when the screen size is less than 399px. Check out the code here $(function () { $('#container').highchart ...

javascriptjquerycsshighcharts

The browser is only showing particular changes made to the CSS file

I'm currently working on a web project and have the following CSS and HTML code: style.css: body { background-color: red; font-size: 14px; font-family: Roboto,arial,sans-serif color: gray; } img { height: 92px; width: 272px; ...

htmlcsscaching

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

javascripthtmlcssinternet-explorer

The animation-play-state is set to 'running', however, it refuses to start playing

I'm in the process of creating a landing page that includes CSS animations, such as fade-ins. Initially setting animation-play-state: "paused" in the CSS file, I later use jQuery to trigger the animation while scrolling through the page. While this s ...

javascriptjquerycssjquery-uicss-animations

"Enhancing the spacing between background images through CSS: A guide to using the repeat property

Looking to design a background with a repeating image using CSS. background: url(../images/bg.PNG) repeat; However, facing an issue where the images are too close together. Any suggestions on how to add padding around each image? ...

css

What is the method for including footer content on a site that only has a masthead?

Is there a way to incorporate footer-type text with copyright disclaimer into a masthead-only website? I keep trying to add a footer, but it ends up getting stacked outside the masthead, causing the screen to become scrollable. My goal is to include the co ...

htmlcsstwitter-bootstrapresponsive-designfooter

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

What could be causing my carousel slider images to not adapt to different screen sizes?

I recently added a carousel slider to my website, and while it looks great on larger screens like desktops and laptops, I noticed that the images are not scaling properly when viewed on smaller screen widths. This has resulted in non-responsiveness which i ...

jquerycssresponsive-designcarousel