Is It Possible to Align Text Horizontally within a Box?

Hey everyone! I'm trying to figure out how to display two elements, "1" and "new referral," side by side without the new referral having a green background. Any help would be greatly appreciated. I've shared my HTML and CSS code snippets below. I've searched and asked around but haven't found a solution yet. Thanks in advance!

*{
    margin: 0;
    border: 0;
    box-sizing: border-box;


background: #CDE7ED;
}



.heading1{
    position: absolute;
width: 449px;
height: 80px;


top: 56px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 40px;
/* or 133% */

text-align: center;

background: #FFFFFF;
color: #0B2B5B;
}

#navbar{
position: relative;
height: 196px;

top: 0px;
display: flex;
justify-content: center;

background: #FFFFFF;
}

.iki{
  
height: 32px;
left: 539px;
top: 230px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 32px;


text-align: center;

color: #0B2B5B;
}
.uc{

height: 32px;
left: 435px;
top: 270px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 32px;
/* identical to box height, or 160% */

text-align: center;

color: #0B2B5B;
}

.box{
  
    position: absolute;
    
    width: 782px;
    height: 380px;
    left: 470px;
    
    top: 334px;
    
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
    border-radius: 4px;
}

.box-header{
   
width: 782px;
height: 64px;
left: 249px;
top: 334px;

background: #FFFFFF;
border-radius: 4px 4px 0px 0px;
}
.b1{
    
width: 40px;
height: 64px;
left: 249px;
top: 334px;

background: #25A575;
border-radius: 4px 0px 0px 0px;
}
.b11{
   
width: 10px;
height: 32px;
left: 264px;
top: 350px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 32px;


display: flex;
align-items: center;
text-align: center;
font-feature-settings: 'pnum' on, 'lnum' on;

color: #FFFFFF;
background: #25A575;
}
.new{
    
width: 132px;
height: 24px;
left: 305px;
top: 354px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
/* identical to box height, or 120% */

display: flex;
align-items: center;
font-feature-settings: 'pnum' on, 'lnum' on;

color: #3A719B;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&family=Oswald:wght@200;300;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <script src="app.js"></script>

    <header class="header">
        <div class="container">
            <nav id="navbar">
                <h1 class="heading1">Patient Referral Form Hayes Valley Health San Francisco </h1>
               
            </nav>
        </div>
    </header>
    <br>
    <br>
    <br>

    <h2 class="iki">Referral Patients</h2>
    <h3 class="uc">You can add up to five patients at a time</h3>
    <div class="box">
        <div class="box-header">
            <div class="b1">
                <div class="b11">
                    1
                </div>
            </div>
            <div class="new">
                New Referral 
            </div>
        </div>
    </div>
    
</body>
</html>

Answer №1

Here is the revised code snippet:

* {
  background: #cde7ed;
}

.heading1 {
  position: absolute;
  width: 449px;
  height: 80px;

  top: 56px;

  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  /* or 133% */

  text-align: center;

  background: #ffffff;
  color: #0b2b5b;
}

#navbar {
  position: relative;
  height: 196px;

  top: 0px;
  display: flex;
  justify-content: center;

  background: #ffffff;
}

.iki {
  height: 32px;
  left: 539px;
  top: 230px;

  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;

  text-align: center;

  color: #0b2b5b;
}
.uc {
  height: 32px;
  left: 435px;
  top: 270px;

  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  /* identical to box height, or 160% */

  text-align: center;

  color: #0b2b5b;
}

.box {
  position: absolute;

  width: 782px;
  height: 380px;
  left: 470px;

  top: 334px;

  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
  border-radius: 4px;
}

.box-header {
  display: flex;
  width: 782px;
  height: 64px;
  left: 249px;
  top: 334px;

  background: #ffffff;
  border-radius: 4px 4px 0px 0px;
}
.b1 {
  width: 40px;
  height: 64px;
  left: 249px;
  top: 334px;

  background: #25a575;
  border-radius: 4px 0px 0px 0px;
}
.b11 {
  width: 10px;
  height: 32px;
  left: 264px;
  top: 350px;

  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;

  display: flex;
  align-items: center;
  text-align: center;
  font-feature-settings: "pnum" on, "lnum" on;

  color: #ffffff;
  background: #25a575;
}
.new {
  width: 132px;
  height: 24px;
  left: 305px;
  top: 354px;

  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  /* identical to box height, or 120% */

  display: flex;
  align-items: center;
  font-feature-settings: "pnum" on, "lnum" on;

  color: #3a719b;
  background-color: white;
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&family=Oswald:wght@200;300;400&display=swap"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>

  <body>
    <script src="app.js"></script>

    <header class="header">
      <div class="container">
        <nav id="navbar">
          <h1 class="heading1">
            Patient Referral Form Hayes Valley Health San Francisco
          </h1>
        </nav>
      </div>
    </header>
    <br />
    <br />
    <br />

    <h2 class="iki">Referral Patients</h2>
    <h3 class="uc">You can add up to five patients at a time</h3>
    <div class="box">
      <div class="box-header">
        <div class="b1">
          <div class="b11">1</div>
        </div>
        <div class="new">New Referral</div>
      </div>
    </div>
  </body>
</html>

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

Leveraging Forms for Entering Google Maps Information

Recently, I've been working on an app that aims to generate a custom map based on user input from a form. If you'd like to test the functionality yourself, head over to this page. After filling out all required fields and hitting "Submit", the g ...

Finding your way to a <div data-role="page"> sans the use of an anchor tag

I need assistance with a specific HTML setup. The first div tag in the code below contains a form with a table that has two columns labeled A and B, along with a button. The second div tag holds a text box, dropdown menu, and submit button. When the button ...

`Exploring the magic of CSS image overlay feature`

I would appreciate it if you could walk me through the implementation of this overlay code... .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ...

Enhancing SEO for slideshow presentations

I've been thinking about the SEO implications of using a slideshow. For content that hasn't been displayed in the slideshow yet, I'm keeping it hidden in a div. While this content will still be indexed, search engines (especially Google) ma ...

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

Hello there, I am a beginner with AngularJS and I am struggling to understand how to create my <option> list. I would like my output to resemble the example in this fiddle: http://jsfiddle.net/XdpJv/ This is what my current code looks like: <se ...

invoking a function by utilizing nested controllers

Struggling with nested controllers, the main goal of this code is to link data extracted from a .json file to another function or file. .html file: <div ng-app="myApp" ng-controller="GetCtrl" > <li ng-controller="ChannelCtrl" ng-repeat="x in ...

Creating interactive HTML buttons using JavaScript to trigger AJAX requests

My current task involves populating an HTML table to showcase users. By making API calls to retrieve user data, I utilize Javascript to add rows to the table. Each row ends with a delete button, intended to trigger a $put request to a separate API endpoint ...

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

https://i.stack.imgur.com/p9owU.jpghttps://i.stack.imgur.com/Kwtnh.jpg I attempted to utilize jQuery toggle, but unfortunately, it is not functioning as expected. <script> $(document).ready(function () { $(".sidebar ul li&quo ...

What could be the reason why the form is appearing correctly on one landing page but not the other?

I have embedded a Marketo form on two different landing pages on our website. I am using the same JavaScript provided by Marketo for both pages (shown in the code below). However, on page 2, the form field label and cell are displaying incorrectly, appeari ...

The sizing of cards in Bootstrap is not uniform

I'm currently working on a page layout using Bootstrap. I've included 3 cards in a row, but they are not displaying at equal sizes for some reason. The content within the cards, including headings and images, seems to be affecting their overall s ...

Tips for creating two interchangeable lists and saving the selected items when the selection process is finished

Utilizing jQuery and specifying dual selectors together, I attempt to reference each variable in the following code: UL_HeadersToOmit - represents the list to select from UL_dropedCols - indicates the list to be passed as a reference to the subsequent fu ...

Building a matrix of checkboxes

I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column. <ul class="checkbox-grid"> <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</lab ...

There are two borders in place, with the second border present only on the right and bottom

Can someone help me achieve borders like the ones in this image? https://i.sstatic.net/qZHbK.png I tried using the after pseudo-element as shown below, but after learning from this discussion: Why can't an element with a z-index value cover its child ...

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

In the realm of typesetting, a punctuated line gracefully weaves its way between two

I am trying to create two sentences with a fixed width of 30%, but the first words in my div go to the next line. The class="left" words are not displaying properly, and then my second div "words" gets mixed with the first div. HTML <div class="bg"> ...

Steps for creating a tileView from scratch

Have you noticed websites using a tile view layout lately? It seems like a popular trend. The concept involves having multiple elements on an HTML page with various widths and heights. These websites often use JavaScript to randomly arrange each element n ...

"My JavaScript code for toggling visibility is not functioning properly. Any suggestions on how to fix

I am currently working on a task that involves showing and hiding container1, but I am confused as to why my code is not functioning properly. The task requirements are as follows: - Clicking on the "Show" button should display container1 - Clicking on the ...