laying out tables in css - html

I have been playing with trying to get a bingo card layout working in html. I want to learn more effective ways to layout content in css. There are lots and lots of examples online but I am getting not sure which ways are the best to take.
In this case I have been hacking to display a bingo card. The idea is to input numbers at the moment. I want to layout this nicely - then eventually print it off.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bingo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>
<body>
<h1>Card</h1>
<p>15 numbers out of 30</p>
<div class="card">
<div class="card-grid">
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="1">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="10">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="30">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="50">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="70">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
</div>
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="23">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="41">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="64">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="83">
</div>
</div>
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="9">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="19">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="39">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="59">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="70">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="90">
</div>
</div>
</div>
</div>
</body>
</html>
css
:root {
--number-width: 60px;
--row-height: 40px;
}
body {
font-family: "Noto Sans KR", sans-serif;
font-size: 1em;
}
.card {
max-width: 600px;
padding: 10px;
background-color: rgb(255, 5, 5);
border: solid 3px black;
border-radius: 5px;
}
.card-grid {
}
.card-row {
display: block;
margin-bottom: 5px;
}
.card-number {
display: inline-block;
width: var(--number-width);
max-width: var(--number-width);
background-color: white;
}
.editable-number {
width: var(--number-width);
height: var(--row-height);
text-align: center;
border: none;
font-size: 1.5em;
}
result
bingo-result
questions
I want to center the numbers in the grid. I did play with the css transform but that rendered content outside of the red div rectangle.
What is the best approach to take with laying out such a tabular view in html - without a table?
Ideally I want to scale this up to do more things as I learn.


Use CSS CSS Flexbox Layout
:root {
--number-width: 60px;
--row-height: 40px;
}
body {
font-family: "Noto Sans KR", sans-serif;
font-size: 1em;
}
.card {
max-width: 600px;
padding: 10px;
background-color: rgb(255, 5, 5);
border: solid 3px black;
border-radius: 5px;
}
.card-grid {
/* CSS Flexbox Layout using display: flex*/
display: flex;
flex-direction: column;
overflow: hidden;
}
.card-row {
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.card-number {
display: inline-block;
width: var(--number-width);
max-width: var(--number-width);
background-color: white;
overflow: hidden;
}
.editable-number {
width: var(--number-width);
height: var(--row-height);
text-align: center;
border: none;
font-size: 1.5em;
box-sizing: border-box;
}
<div class="card">
<div class="card-grid">
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="1">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="10">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="30">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="50">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="70">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
</div>
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="23">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="41">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="64">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="83">
</div>
</div>
<div class="card-row">
<div class="card-number">
<input type="text" class="editable-number" value="9">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="19">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="39">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="59">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="70">
</div>
<div class="card-number">
<input type="text" class="editable-number" value="90">
</div>
</div>
</div>
</div>


give card-grid a fixed width and give it and margin auto

Related

How to create multiple rows which contains two text boxes and labels above them in html/css?

I want to create three rows. In each row I want to have two textboxes with labels above them. Right now, I have this html code:
.firstRow, .secondRow, .thirdRow {
display: inline-block;
}
label, .textBox {
display: block;
}
<div class="firstRow">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
<div class="secondRow">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
<div class="thirdRow">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
The outcome is in this link:
https://jsfiddle.net/Lcav5xje/
What should I change?

Here is the snippet using simple display:flex;
also no need to add separate class for every row
.row {
display: flex;
}
.form-grp {
margin: 10px
}
.form-grp label {
display:block;
}
<div class="row">
<div class="form-grp">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
</div>
<div class="form-grp">
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
</div>
<div class="row">
<div class="form-grp">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
</div>
<div class="form-grp">
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
</div>
<div class="row">
<div class="form-grp">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
</div>
<div class="form-grp">
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
</div>

You can use grid to align the items.
example:
.row {
display: block;
}
.grid {
display: grid;
grid-template-rows: 1fr 1fr; /*Two columns*/
grid-auto-flow: column /*to align the input under the label*/;
justify-content: start; /*sticked to the left*/
grid-gap: 0 10px; /*horizontal space between inputs*/
}
<div class="row">
<div class="grid">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
<div class="row">
<div class="grid">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
</div>
<div class="row">
<div class="grid">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
</div>

Try this code..
Demo
.firstRow,
.secondRow,
.thirdRow {
display: inherit;
}
.inner {
display: inline-block;
vertical-align: top;
}
<div class="firstRow">
<div class="inner">
<label for="name1">Name1</label>
<input class="textBox" formcontrolname="name1">
</div>
<div class="inner">
<label for="name2">Name2</label>
<input class="textBox" formcontrolname="name2">
</div>
</div>

justify-content space-between not aligning elements left and right

Alright, so I am trying to use Flexbox to align my form on the left hand side of the screen and my image on the right hand of the screen using justify-content: space-between but when I put that on my .container it doesn't work. Here is what I have so far:
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
<div class="image">
<img src="img/city.jpg" alt="">
</div>
</div>
</form>
My style:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
img {
width: 20%;
}

Put the two sections in their own containers, then it can work.
.container {
display: flex;
justify-content: space-between;
}
section:first-child {
background-color: orange;
}
section:last-child {
background-color: lightgreen;
}
.image {
border: 2px dashed black;
height: 100px;
width: 100px;
}
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<section><!-- container one -->
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
</section>
<section><!-- container two -->
<div class="image"> image
<img src="img/city.jpg" alt="">
</div>
</section>
</div>
</form>

Fieldset with aligned items using bootstrap not aligned properly

I'm working on a wire frame and trying to create the HTML based on it. This is the structure I'll be require to build:
This is what I have done so far but the alignment is not correctly rendered. I have used the two column grid approach and then used the form-inline classes, however the label and text boxes are not getting aligned in one row.:
<style>
.body {
padding: 1px 1px 1px 1px;
}
.column {
float: left;
width: 50%;
}
.customLegend {
border: 1px solid #000;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0;
left: 1em;
padding: 0 .5em;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container body">
<fieldset class="customLegend">
<legend>Sources</legend>
<div class="row">
<!-- Left Section -->
<div class="column">
<div class="form-inline">
<div class="form-inline">
<label>Initial Reporter </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">First Name </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Phone Number </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Title </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Address </label>
<textarea class="form-control"> </textarea>
</div>
<div class="form-group">
<label class="lbl">Qualification </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group">
<label class="lbl">Primary Source </label>
<input type="checkbox" class="form-control" />
</div>
<div class="form-group">
<label class="lbl">P I Usage </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
</div>
<!-- Right Section -->
<div class="column">
<div class="form-inline">
<div class="form-group">
<label class="lbl">Ok to Contact? </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
<div class="form-group">
<span class="form-inline">
<label>Last Name </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Email </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Company </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Country </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Zip/Postal </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>City </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>State/Region </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Phone Number 2 </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>FAX </label>
<input type="text" class="form-control" />
</span>
</div>
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Create New Source</button>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Check the Jsfiddle here
You need to replace the column by col-6 and the hierarchy of the bootstrap divs should change to following
<div class="container">
<div class="row">
<!-- Left Section -->
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>

how to design in bootstrap textbox and lable without space

i need some help for front end side. i have below picture i want to design form like below picture in bootstrap but in bootstrap how do this please help check my below html.
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
i want like this
my bootstrap

Need to Update with this CSS and HTML. It's Responsive so you can check properly. I hope this one help you.
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
input{
width:100px;
}
label{
padding:5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<form class="form-inline">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name" >
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</form>
</div>

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
#media (min-width: 768px){
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
display: inline-flex;
}
}
</style>
</head>
<body>
<div class="col-md-12 form-inline">
<div class="col-md-2" style="display: inline-flex;">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</div>
</body>
</html>

label {
margin-bottom: .5rem;
display: contents !important;
}
.form-control {
display: initial !important;
width: auto !important;}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</body>
</html>

How to display html form next to each other and in rows?

I am currently trying to get two forms next to each other and then two more forms under it all aligned. If anyone has any suggestions to help me out that would be great. Here is my source code in a jsfiddle.
I am trying to get the name and company input next to each other and then the phone and email below it with the comment textbox at the base. I was trying the 40% width and it sort of helped to get the first row. I was thinking of going the table route as I could probably get that working fine for the forms being aligned but I know tables is not the correct route for coding this.
https://jsfiddle.net/xtwistedmetal/two7hgtm/1/
or
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
display: inline-block;
width: 40%;
}
.mc-field-group2 {
display: inline-block;
}
</style>
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div class="mc-field-group1">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
<div class="mc-field-group2">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<br>
<div class="mc-field-group2">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>

You can try an approach like below
.form-group:after{
content: "";
display:table;
clear:both;
}
.form-group-half{
width:44%;
padding:0 3%;
float:left;
}
.form-group-half > label{
display:block;
}
.form-group-half > input,
.form-group-half > select,
.form-group-half > textarea {
width:100%;
}
<div class="form-group">
<div class="form-group-half">
<label>Field 1</label>
<input type="text" name="field1">
</div>
<div class="form-group-half">
<label>Field 2</label>
<input type="text" name="field2">
</div>
</div>
<div class="form-group">
<div class="form-group-half">
<label>Field 3</label>
<input type="text" name="field3">
</div>
<div class="form-group-half">
<label>Field 4</label>
<input type="text" name="field4">
</div>
</div>

HTML ;
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1" style=>
<div style="width:40%">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div style="width:40%">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
</div>
<div class="mc-field-group2">
<div style="width:40%">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<div style="width:40%">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
</div>
<br>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
CSS
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 12px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
width: 100%;
display: inline-flex;
}
.mc-field-group2 {
display: inline-flex;
width: 100%;
}
label{
color:red;
width:40px !important;
}