Align bid count with data points in ResultsCondensedCard

src/Components/ResultsCard/ResultsCard.jsx

@@ -69,6 +69,7 @@ const ResultsCard = (props) => {
   const sections = [
     /* eslint-disable quote-props */
     {
+      'Bid Count': <BidCount bidStatistics={stats} hideLabel />,
       'Bid cycle': getResult(result, 'latest_bidcycle.name', NO_BID_CYCLE),
       'Skill': getResult(result, 'skill', NO_SKILL),
       'Grade': getResult(result, 'grade', NO_GRADE),
@@ -109,13 +110,10 @@ const ResultsCard = (props) => {
       {() => (
         <div id={id} className="results-card">
           <Row className="header" fluid>
-            <Column columns="6">
+            <Column columns="12">
               <h3>{title}</h3>
               <Link to={`/details/${result.id}`}>View position</Link>
             </Column>
-            <Column columns="6">
-              <BidCount bidStatistics={stats} altStyle />
-            </Column>
           </Row>
           <Row id={`${id}-inner`} fluid>
             <Column columns="6">

src/Components/ResultsCondensedCard/ResultsCondensedCard.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import ResultsCondensedCardTop from '../ResultsCondensedCardTop';
 import ResultsCondensedCardBottom from '../ResultsCondensedCardBottom';
 import ResultsCondensedCardFooter from '../ResultsCondensedCardFooter';
-import ResultsCondensedCardStats from '../ResultsCondensedCardStats';
 import { POSITION_DETAILS, FAVORITE_POSITIONS_ARRAY, BID_RESULTS, HOME_PAGE_CARD_TYPE } from '../../Constants/PropTypes';
 
 const ResultsCondensedCard = ({ position, favorites, bidList, type, refreshFavorites }) => (
@@ -14,7 +13,6 @@ const ResultsCondensedCard = ({ position, favorites, bidList, type, refreshFavor
       position={position}
       type={type}
     />
-    <ResultsCondensedCardStats bidStatisticsArray={position.bid_statistics} />
     <ResultsCondensedCardBottom
       position={position}
       favorites={favorites}

src/Components/ResultsCondensedCard/__snapshots__/ResultsCondensedCard.test.jsx.snap

@@ -87,20 +87,6 @@ exports[`ResultsCondensedCardComponent matches snapshot 1`] = `
     }
     type="default"
   />
-  <ResultsCondensedCardStats
-    bidStatisticsArray={
-      Array [
-        Object {
-          "at_skill": 0,
-          "bidcycle": "Demo BidCycle 2018-03-13 15:51:10.980576+00:00",
-          "id": 6,
-          "in_grade": 0,
-          "in_grade_at_skill": 0,
-          "total_bids": 2,
-        },
-      ]
-    }
-  />
   <ResultsCondensedCardBottom
     bidList={
       Array [

src/Components/ResultsCondensedCardBottom/ResultsCondensedCardBottom.jsx

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 import CondensedCardData from '../CondensedCardData';
 import { POSITION_DETAILS, FAVORITE_POSITIONS_ARRAY } from '../../Constants/PropTypes';
 import Favorite from '../../Containers/Favorite';
+import ResultsCondensedCardStats from '../ResultsCondensedCardStats';
 
 const ResultsCondensedCardBottom = ({ position, favorites, refreshFavorites }) => (
   <div className="condensed-card-bottom-container">
     <div className="usa-grid-full condensed-card-bottom">
+      <ResultsCondensedCardStats bidStatisticsArray={position.bid_statistics} />
       <CondensedCardData position={position} />
       <div className="usa-grid-full condensed-card-buttons-section">
         <Favorite

src/Components/ResultsCondensedCardBottom/__snapshots__/ResultsCondensedCardBottom.test.jsx.snap

@@ -7,6 +7,20 @@ exports[`ResultsCondensedCardBottomComponent matches snapshot 1`] = `
   <div
     className="usa-grid-full condensed-card-bottom"
   >
+    <ResultsCondensedCardStats
+      bidStatisticsArray={
+        Array [
+          Object {
+            "at_skill": 0,
+            "bidcycle": "Demo BidCycle 2018-03-13 15:51:10.980576+00:00",
+            "id": 6,
+            "in_grade": 0,
+            "in_grade_at_skill": 0,
+            "total_bids": 2,
+          },
+        ]
+      }
+    />
     <CondensedCardData
       position={
         Object {

src/Components/ResultsCondensedCardStats/ResultsCondensedCardStats.jsx

@@ -7,7 +7,7 @@ const ResultsCondensedCardStats = ({ bidStatisticsArray }) => {
   const bidStatistics = getBidStatisticsObject(bidStatisticsArray);
   return (
     <div className="condensed-card-footer condensed-card-statistics">
-      <div className="usa-grid-full condensed-card-footer-container">
+      <div className="usa-grid-full">
         <BidCount bidStatistics={bidStatistics} />
       </div>
     </div>

src/Components/ResultsCondensedCardStats/__snapshots__/ResultsCondensedCardStats.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`ResultsCondensedCardStatsComponent matches snapshot 1`] = `
   className="condensed-card-footer condensed-card-statistics"
 >
   <div
-    className="usa-grid-full condensed-card-footer-container"
+    className="usa-grid-full"
   >
     <BidCount
       altStyle={false}

src/sass/_bidCount.scss

@@ -79,7 +79,7 @@
   }
 
   .bid-count-number {
-    padding: .2em .5em;
+    padding: .2em 1em;
   }
 
   @media screen and (max-width: $screen-sm-max) {

src/sass/_condensedCard.scss

@@ -10,6 +10,14 @@ $condensed-card-data-padding: 15px 20px 9px;
   line-height: 19px;
   margin-bottom: $condensed-card-margin-bottom;
 
+  .bid-count-container {
+    display: flex;
+
+    .bid-count-number {
+      font-size: .9em;
+    }
+  }
+
   .new-flag {
     background-color: $color-white;
     border-radius: 100px;
@@ -144,10 +152,6 @@ $condensed-card-data-padding: 15px 20px 9px;
       margin-bottom: 0;
     }
 
-    .bid-count-number {
-      padding: .2em 1em;
-    }
-
     .bid-count-list-item:first-child {
       border-radius: 5px 0 0 5px;
     }

src/sass/_results.scss

@@ -38,16 +38,17 @@ $results-container-width: 100% - $filter-container-width;
   margin-bottom: 2rem;
   padding: 1.1rem;
 
-  .bid-count-container {
-    float: right;
-    font-size: .95em;
-
-    .bid-count-label {
-      font-weight: normal;
-      padding-top: .4em;
+  dl {
+    dt,
+    dd {
+      vertical-align: bottom;
     }
   }
 
+  .bid-count-container {
+    font-size: .8em;
+  }
+
   .header {
     margin-bottom: 1rem;
     margin-top: .2rem;