Show content side by side within a card

I'm looking for some assistance in arranging elements horizontally within a card instead of the default vertical layout. Currently, my card appears like the image below:

However, I would like it to show the elements inline.

    <div class="ibm-col-12-2 card1" >
                                    <div class="ibm-card">
                                        <div class="ibm-card__image">
                                            <img src="https://cdn.kalingatv.com/wp-content/uploads/2019/12/ibm.png" alt="card_3" width="300" height="170" class="ibm-resize"></div>
                                        <div class="ibm-card__content">
                                            <h4 class="ibm-h4">Gain transactional insights</h4>
                                            <p>Use AI to rapidly find and visualize complete supply chain transactions</p>
                                            <p class="ibm-ind-link">
                                                <a href="javascript:;" class="ibm-forward-link ibm-light">Explore</a></p>
                                        </div>
                                    </div>
                                </div>

javascripthtmlcss

Answer №1

To achieve a responsive design, consider utilizing a flexbox layout if CSS3 is enabled. Apply the style .ibm-card with display: flex; to automatically position text beside an image.

For more resources on understanding and implementing flexbox layouts, you can visit websites like this page.

    <div class="ibm-col-12-2 card1" >
                                    <div class="ibm-card" style="display: flex;">
                                        <div class="ibm-card__image">
                                            <img src="https://cdn.kalingatv.com/wp-content/uploads/2019/12/ibm.png" alt="card_3" width="300" height="170" class="ibm-resize"></div>
                                        <div class="ibm-card__content">
                                            <h4 class="ibm-h4">Gain transactional insights</h4>
                                            <p>Use AI to rapidly find and visualize complete supply chain transactions</p>
                                            <p class="ibm-ind-link">
                                                <a href="javascript:;" class="ibm-forward-link ibm-light">Explore</a></p>
                                        </div>
                                    </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

What is the process for including an accessibility icon in screen readers such as JAWS, VoiceOver, and TalkBack?

I was given a task to update the privacy page content which involved dealing with a heart icon in the JSON file. The challenge was ensuring that this icon is accessible to screen reader applications such as JAWS, VoiceOver, and TalkBack. My approach to so ...

javascriptangularaccessibilityscreen-readersjaws-screen-reader

Exploring how to successfully test the parsing of a string using JSON.parse in Jest

Currently, I am in the process of creating unit tests for an API. In a scenario where I implement the following code: const apiResponse:object = JSON.parse(body) expect(apiResponse).toHaveProperty('error') If the API does not return JSON data, ...

javascriptjsontypescriptapijestjs

Ways to automatically adjust the margins of my HTML body page

I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to b ...

htmlcssborder

color-transition effect (CSS-only)

I'm attempting to replicate the fading effect shown here in the lower right corner where the artist name and track title gradually fade out towards the right. Initially, I tried creating an overlay image, but it resulted in a jagged edge on the right ...

htmlcss

Exploring the Art of Navigation with Ionic and Angular

Trying to integrate Angular, Meteorjs, and Ionic Framework has been a smooth process, thanks to the urigo:angular and urigo:ionic packages. However, I'm facing difficulties in configuring ionic links and angular routing to make it work seamlessly. Des ...

javascriptangularjsroutesionic-framework

The information presented in the following content seamlessly complements the captivating banner image

I am facing an issue with my banner image that is supposed to display only on small devices in a specified section. For more details, please refer to the following Stackoverflow Topic However, this setup has caused the content below to overlap and no long ...

htmlcssbootstrap-4

What is the best way to display a responsive website design exclusively for certain devices?

My website currently lacks responsiveness. Typically, we can check if a website is responsive by resizing the browser to see if it adjusts using CSS3 media queries. However, I am looking to create a better user experience by ensuring that visitors using a ...

htmlcssresponsive-designweb-deployment

Guide on showing a URL within an onclick event using the jQuery Append method

My method involves using AJAX to upload images and then displaying the uploaded image by utilizing the jQuery append function. The challenge comes when I try to add an onclick event to the specific image tag. To tackle this, I start by creating a JavaScri ...

javascriptjqueryajax

Tips for accessing elements in CSS

I can't seem to find a specific question that matches mine exactly, but I need assistance in extracting an element from the DOM using CSS to apply a style to it. The block structure is similar to this: <div class="parent-block"> &l ...

htmlcssreactjsqueryselector

Modifying an element within a nested array

I am struggling to create a JavaScript function that can update the "checked" value within an object in an array structured as follows: array:[ { id:1, name:"foo", options: [ {id:"one", checked: false}, {id:"two", checked: true} ] ...

javascriptarraysvue.js

Attempting to elegantly shift div elements using jQuery

There is a foreach loop that brings in 4 divs containing external images (replaced by "dummy" content in this snippet for demonstration purposes). When clicking on the image, the hidden content should appear. The issue I am facing is how to smoothly transi ...

javascriptphpjquery

Issues with registering double brackets in Angular.js HTML are causing some problems

After delving into angular.js recently (and I use the term "delve" loosely), I have been working on creating a basic website and hit a roadblock with form validation. It seems that the double bracket notation I picked up from "Shaping up with angular.js" i ...

htmlcssangularjs

MAC Safari is not registering input fields

I'm experiencing a small issue with a form that has two input fields for indicating time (in the format HH:mm) that are very close together, like this: https://i.sstatic.net/u2GzN.jpg Here is the HTML code snippet: <label> <span>Hou ...

htmlcsssafari

Modify the color of links when hovering using CSS

I am currently utilizing VScode and attempting to modify the link color on :hover. I am also interested in adding a grow Hover Effect. Here is my code snippet: .subareas a.link { margin: 0 0 10px 10px; float: right; height: 30px; line-height: 29 ...

htmlcsshovermousehover

Generate different choices in a DropDownList depending on the selection made in another DropDownList using JavaScript

I am currently working on implementing a search panel that will populate items based on the minimum and maximum price criteria. When looking at the front view of my page, it appears as follows: For instance, if I select a minimum price value of 100,000, t ...

javascript.net

Create CSS styles that are responsive to different screen sizes and

What is the best approach to ensure that these styles are responsive on any mobile device? nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #0066cc; background: linear-gradient(top, #0066cc 0%, #bbbbbb 10 ...

htmlcssmobileresponsive-design

Utilize .map.js to retrieve the complete project

While exploring the devtools, I came across a new Host named webpack://. I noticed that it housed all the files prior to being minimized, thanks to the *.map.js file. Interestingly, this host also included all the node_modules. Curiously, when I attempted ...

javascriptnode.jsnpmwebpacknode-modules

What is the process for connecting my Stripe webhook to my Heroku application?

After successfully integrating Stripe into my JavaScript app and testing it with ngrok in the development environment, I encountered a timeout issue when switching to the production environment. Users are unable to proceed from the Stripe checkout screen. ...

javascriptnode.jsexpressherokustripe-payments

Swapping elements in an *ngFor loop using Angular/Ionic

In my quest to create a dynamic list of items using the Angular directive *ngFor, I have come up with the following structure: Text - Image Image-Text Text - Image Image-Text https://i.sstatic.net/QgLdr.png <ion-grid> <ion-row *ngFo ...

htmlcssangularionic2material-design

What is the best method for eliminating buttons and text in a row using CSS?

I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button. Here are my CSS snippets: .google-button { color: white; borde ...

javascripthtmlcss