Google mapとテキストを横並びにしたい

前提・実現したいこと

Google mapとテキストを横並びにしたいです。
どうぞ、よろしくお願致します。

発生している問題

下記の、addressクラスとmapクラスを横並びにしたいのですがflexbox、floatでもうまくいきません。

該当のソースコード

HTML
1  <div id="access">
2            <div class="container">
3                <div class="address">
4                    <h1>Access</h1>
5                    <p>〒000-0000<br>〇〇〇〇〇〇<br>〇〇〇</p>
6                </div>
7            <div class="map">
8                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.6750398271756!2d139.72727301526064!3d35.660377138722886!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b771049dc33%3A0x5bfe0248594cc802!2z5YWt5pys5pyo44OS44Or44K6!5e0!3m2!1sja!2sjp!4v1578732025930!5m2!1sja!2sjp" width="720" height="515" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
9    </div>
10</div>
11</div>

scss
1$layout-width-inner: 1226px;//インナーの幅
2
3// ブレークポイント
4$breakpoints: (
5  "sp": "screen and (max-width: 767px)",
6  "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
7  "pc": "screen and (min-width: #{$layout-width-inner})",
8);
9
10// メディアクエリー
11@mixin mq($breakpoint: sp) {
12
13  @media #{map-get($breakpoints, $breakpoint)} {
14
15    @content;
16  }
17}
18
19#access {
20        position: absolute;
21        bottom:-100px;
22        left: 93px;
23        margin: 0 auto;
24        @include mq('sp') {
25            bottom: 0;
26            left: 0;
27        }
28        .container {
29            overflow: hidden;
30            @include mq('tab') {
31                display: block;
32            }
33            @include mq('sp') {
34                width: 343px;
35                padding: 16px;
36            }
37        .address {
38            position: relative;
39            margin-right: 251px;
40            width: 210px;
41            float: left;
42            @include mq('tab') {
43                margin-right: 0;
44            }
45        h1 {
46            color: #fff;
47            margin: 0 auto 40px;
48        }
49        p {
50            color: #fff;
51            margin: 0 auto 40px;
52
53        }
54       
55    }
56   
57    .map {
58        width: 100%;
59        height: 0;
60        overflow: hidden;
61        position: relative;
62        padding-top: 71.5%;
63        float: right;
64       
65        iframe {
66          position: absolute;
67          top: 0px;
68          left: 0px;
69         width: 100%!important;
70          height: 100%!important;
71          
72          }
73        }
74    
75    
76       
77        
78    
79}
80    .access-btn {
81        position: absolute;
82        top: 193px;
83        width: 326px;
84        height: 64px;
85        color: #fff;
86        border: 1px solid #fff;
87        text-align: center;
88        font-size: 20px;
89        font-weight: bold;
90        line-height: 60px;
91    }
92}