Placing additional text beside a nicely aligned box

I am struggling to figure out how to position text in the center left of a box that is located in the top right corner of my HTML template.

<table class="label">
        <tr>
          <td class="sign">F</td>
          <td class="holder">
            <div class="box">
              FIRST-CLASS<br />
              ePostage<br />
            </div>
            InternetBase <!-- Text to be added next to the box -->
          </td>
        </tr>
        <tr>
          <td colspan="2" class="title">FIRST-CLASS</td>
        </tr>
        <tr>
          <td colspan="2" class="row">
            <p class="sender">
              {{fromName}}
              <br />
              {{refNumber}} <br />
            </p>
            <p class="meta">
              Email Date: {{labelDate}}
              <br />
              Memory: {{emailWeight}} kb
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="receiver">
            <p class="to" style="padding-top: 10px">
              {{toName}}
              <br />
              {{toRefNumber}}<br />
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="barcode">
            <p class="note">TRACKING # EP</p>
            <img src="data:image/png;base64, {{barImage}}" alt="" class="img" />
          </td>
        </tr>
        <tr>
          <td colspan="2" class="footer"></td>
        </tr>
      </table>

      <style>
        /* CSS Styles */
      </style>

I simply want to include the text InternetBase directly beside the box in the top right corner.

https://i.sstatic.net/RNJJv.jpg

How can I achieve this exactly?

htmlcss

Answer №1

Utilize a flexbox for the holder element to align content appropriately.

<table class="label">
  <tr>
    <td class="sign">F</td>
    <td class="holder">
      <div class="flexbox">
        <div class="internet-base">
          Internet Base
        </div>
        <div class="box">
          FIRST-CLASS<br />
          ePostage<br />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="title">FIRST-CLASS</td>
  </tr>
  <tr>
    <td colspan="2" class="row">
      <p class="sender">
        {{fromName}}
        <br />
        {{refNumber}} <br />
      </p>
      <p class="meta">
        Email Date: {{labelDate}}
        <br />
        Memory: {{emailWeight}} kb
      </p>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="receiver">
      <!-- <p class="signature">SIGNATURE WAIVED</p> -->
      <p class="to" style="padding-top: 10px">
        {{toName}}
        <br />
        {{toRefNumber}}<br />
      </p>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="barcode">
      <p class="note">TRACKING # EP</p>
      <img src="data:image/png;base64, {{barImage}}" alt="" class="img" />
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer"></td>
  </tr>
</table>

<style>
  @import url("http://fonts.cdnfonts.com/css/helvetica-neue-9");

  @page {
    margin: 0px;
  }

  body {
    margin: 0px;
  }

  * {
    font-family: "Helvetica Neue", sans-serif;
  }

  p {
    margin-top: 0;
    margin-bottom: 5px;
  }

  .label {
    width: 600px;
    border: 2px solid black;
    border-collapse: collapse;
    font-weight: bold;
  }

  .sign {
    font-size: 140px;
    margin: 0;
    border: 2px solid black;
    width: 160px;
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
  }

  /* Additional CSS styles removed for brevity */

  .flexbox {
    display: flex;
    align-items: center;
  }
  
  .internet-base {
    margin-left: auto;
    margin-right: 10px;
  }

</style>

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

Tips for showcasing a drop-down menu using Jquery

I am currently utilizing jQuery to showcase a drop-down menu. It is successfully working for a single menu and displaying the appropriate drop-down. However, when I attempt to use more than one menu, it displays all of the drop-down menus simultaneously. I ...

javascriptjqueryhtmlcssdrop-down-menu

How to effectively utilize `MutationObserver` for monitoring the properties of an `HTMLElement` instead of focusing on its attributes

By using the MutationObserver.observe() method, I am able to monitor changes in a specific attribute. For instance, if I have a Div element and the attribute value is modified, then the designated callback function will be executed. However, if the propert ...

javascripthtml

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

javascriptcssreactjsmaterial-ui

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

The unusual behavior of a page refresh in jQuery when replacing content

My website features a flash player. This code references the flash player stored in player_codes.php: <script language="javascript" type="text/javascript" src="songs_related/flashmp3player/swfobject.js" ></script> <!-- Div that contains pl ...

phpjqueryajaxhtml

Switching the checkbox value upon clicking a div element

One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...

javascripthtmlcssangularjscordova

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

Internet Explorer Fails to Display CSS Background Images

Requesting assistance, The issue I am facing is that the background image is not displaying in Internet Explorer, although it appears perfectly fine in Safari. I have conducted thorough checks with W3C CSS validation and HTML validation, confirming that ...

htmlcssinternet-explorer

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

Validation issue with Reactive Forms not functioning as expected

My latest project involves a user signup component that I created from scratch import { Component } from '@angular/core'; import {UserManagementService} from '../user-management.service'; import {User} from "../user"; import {FormBuild ...

javascripthtmlangulartypescript

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

csscss-selectorspseudo-elementadblock

Utilizing ng-repeat to loop through a div element that consists of various nested tags

I need to display multiple tabs, with each tab having a table where the values are populated from a database. The number of tabs is dynamic and fetched from another page of the application. All tables have the same structure but different values. How can I ...

javascripthtmlangularjsangularjs-ng-repeat

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

javascripthtmlcss

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

javascriptjqueryhtmlangularjssettimeout

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...

javascriptjqueryhtmlfirefoxbrowser

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

javascripthtmljqueryjson

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

What is the best way to effectively apply a mask within a PixiJS container so that its color does not display upon page refresh?

After implementing the code snippet below to add a mask in a container, I encountered an issue where upon clicking the refresh button on the page (chrome), the pixi stage would turn completely white until the refreshing process is completed. Can anyone p ...

javascripthtmlgoogle-chromepixi.js