Aligning HTML elements side by side

I am currently utilizing reactJS to create a form. Within this form, I am attempting to include a text field, a button for copying the text to the clipboard, and a hyperlink that redirects to a valid website.

The issue I am facing is evident in the provided screenshot - the copy button and the hyperlink are not aligning properly. One element appears lower than the other and is overlapping with other components. Screenshot

My objective is to arrange these elements in a single row by referencing my html and CSS code as shown below: .html

<div>
  <div className="link">
    <InputField
      disabled={this.state.disabled}
      placeholder={this.props.placeholder}
      title={this.props.title}
      value={this.props.value}
      change={e => this.props.change(e)}/>
    </div>
    <div className="copy-button">
      <button onClick={(e) => this.copyToClipboard(e)}>C</button>
    </div>
    <div id="link-button">
      <a className="link-button" target="_blank" rel="noopener noreferrer" href={this.props.value}>Visit</a>
    </div>
</div>

.CSS

.link {
    width:80%;
    float:left;
    height:35px;
}
.link-button {
    width:5%;
    float:left;
    padding-left:10px;
    height:35px;
}
.copy-button {
    width: 5%;
    float:left;
    padding-left: 10px;
    height:35px;

}

Answer №1

Start by updating your HTML structure with a class name for the parent container as shown below-

<div class="parent_class">
   <div className="link">
      <InputField
         disabled={this.state.disabled}
         placeholder={this.props.placeholder}
         title={this.props.title}
         value={this.props.value}
         change={e => this.props.change(e)}
      />
   </div>
   <div className="copy-button">
      <button onClick={(e) => this.copyToClipboard(e)}>C</button>
   </div>
   <div id="link-button">
      <a className="link-button" target="_blank" rel="noopener noreferrer" href={this.props.value}>Visit</a>
   </div>
</div>

Next, utilize CSS to align these items in the same row by setting the parent display property to flex, like so-

.parent_class{
   display: flex;
   flex-wrap: nowrap;
}

To adjust the width of each item individually, add the following CSS code-

.link {
   width:80%;
 }
 .link-button {
   width:5%;
 }
 .copy-button {
   width: 5%;
 }

You can further customize with additional CSS properties such as padding and height.

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

Unable to display the outside table border in CSS styling

Lately, I've been relying on 'border = 1' in my HTML for styling, but I've come to the realization that using CSS would be more efficient. So, I went ahead and created a simple border class like this... .basicborder table, .basicborder ...

Transferring information between two separate components

Hey there, I'm struggling with the Payment Component. What I want to achieve is that when I click on a link, it transfers (ClassG, imageG, and PriceG) to the Payment Component where I can then style them accordingly. I've attempted something, but ...

Having difficulties transmitting numerical values through res.send() in express with node

Currently, I'm faced with a challenge in my express application on node.js as I attempt to retrieve the "imdb rating." movies.json [{ "id": "3962210", "order": [4.361276149749756, 1988], "fields": { "year": 2015, "title": "David and Goliath" ...

JavaScript can extract a portion of an array

Is it possible to generate a new array consisting of all elements ranging from the nth to the (n+k)th positions within an existing array? ...

Switching a react virtualized table from JavaScript to TypeScript can uncover some type-related challenges

I have implemented the following demo in my React project: https://codesandbox.io/s/react-virtualized-table-checbox-stackoverflow-rbl0v?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js However, I am encountering issues with the code sni ...

Creating input fields in a plugin that dynamically initializes multiple fields

I have multiple forms on a single page, each containing a phone number field driven by a JavaScript plugin. As a result, I am faced with having to properly initialize a large number of these fields. Manually initializing them would require: number of for ...

An error has occurred while adding an item to the playback queue using the Spotify API, resulting

As I was trying to achieve the functionality of immediately playing the next song after the current track ends, my approach involved using the 'add Item to playback queue' feature of the Spotify API. // WebPlayback.tsx import { useEffect, useStat ...

Pictures on aspx websites utilizing a Master Page

On my master page, I have two images - a logo at the top and a Facebook link at the bottom. There is also an admin folder containing .aspx pages specifically for admin logins. For all non-admin pages, the images are accessed using the src of image/logo.jp ...

Tips on determining the Meteor collection a client will subscribe to at runtime

In the process of developing a web application, I am faced with the task of dynamically examining the collections (publications) of a DDP server. One challenge that has surfaced is that once a Meteor collection is created, it persists throughout the durati ...

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

I am struggling to create a modal component for a settings button

I am currently working with Quasar VueJS and I have a requirement to add a button on my navbar that will trigger a pop-up dialog settings panel. This settings panel will be used for various functionalities such as dynamic theming, although that is somewhat ...

Ways to output information via javascript/jquery

I am working on the following JS code. let myData=[]; for(let j=1;j<=Pages;j++) { $.ajax({ type: 'get', url: 'link.xml'+j, async: false, dataType: 'xml', success: function(data){ ...

Shadcn/ui Select - update the state upon user's item selection

I am currently using Shadnui and trying to accomplish a simple task of allowing the user to select a number from 1 to 6. I want the state to update when the user makes a selection. While researching, I came across this thread: Shadcn ui select component s ...

Unable to trigger button retrieved through ajax request

I am facing a minor issue with my php page. It returns a button using ajax, as you can see below: HTML snippet: <a href="#" class="unit_register_button"> Register </a> jQuery code: $('a.unit_register_button').click(function(e) ...

The findOne() function is providing the complete model instead of a specific document as expected

When using findOne() to extract a document, the correct result is printed when the returned value is logged. However, when looping over it, the model is printed instead of the original document stored in the City table: { _id: 62e135519567726de42421c2, co ...

Converting objects to arrays in reactJS

Here is the object structure I currently have: { DepositAmt_0: 133 DepositAmt_1: 455 DepositAmt_2: 123 DepositNotes_0: "some notes " DepositNotes_1: "some comment" DepositNotes_2: "some comme ...